0

Un increíble saludo.

Tengo este pie de pagina, pero en la versión extra-pequeña, pequeña y mediana, no se ve bien, por tanto me gustaría que el contenido en estas resoluciones, quede mejor centrado, ya que normalmente tengo el texto del footer justificado a los extremos, sin embargo no se en este caso que se puede hacer. (Lo estoy haciendo con Bootstrap).

Muchas gracias.

/*FOOTER*/

footer {
  background-color:#1A1A1A;
  height: 50%;
  color: white;
  padding: 15px;
}

.main1 { 
  display:flex;
  margin:0 auto;
}

footer img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

footer img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
<!-- FOOTER -->  
<footer>
  <div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6 text-left">
            <h6 class="text-muted lead">CONTACTO:</h6>
            <h6 class="text-muted">
            Carrera 8h No. 166-71 Local 2<br>
            Santa Cruz de la Ronda.<br>
            Teléfonos: 3115988953 – 3112641818.<br>
            </h6>
        </div>

        <div class="col-xs-12 col-md-6 text-right">
            <h6 class="text-muted lead">ENCUENTRANOS EN LAS REDES</h6>
            <div class="redes-footer">
              <a href="https://www.facebook.com/"><img src="imagenes/facebook-2.png"></a>
              <a href="https://twitter.com/"><img src="imagenes/twitter-2.png"></a>
              <a href="https://www.youtube.com/"><img src="imagenes/youtube-2.png"></a>
            </div>
        </div>
    </div>
    <div class="row"> 

        <div class="col-md-12 text-right">
            <p class="text-muted small">José Miguel, arte y belleza @2016.<br> Todos los derechos reservados.</p>
        </div>
        
    </div>

    </div>
  </div>  
</div>
</footer>

1
  • En bootstrap y otras similares biene clases definidas para adaptar componentes acorde al tamaño del dispositivo; getbootstrap.com/docs/4.0/layout/grid
    – user34391
    el 18 sep. 2017 a las 0:41

1 respuesta 1

1

si trabajas con bootstrap y quieres que se comporte la visualización de manera responsive para tamaños pequeños creo que la clase a utilizar es "col-sm- *", así que debería quedarte las clases de los elementos <div> como:

<div class="col-xs-12 col-sm-12 col-md-6 ...">

también podrías intentar probar a cambiar la clase "container" por "container-fluid" a ver si mejora la visualización.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.