2

Buenos días tengo un problema con el siguiente diseño.

Lo que pasa es que quiero alinear verticalmente los 4 elementos que se encuentran al lado de la imagen y que se adapten para un celular ya sea que se cambien debajo de la imagen (responsivas).

introducir la descripción de la imagen aquí

Este es mi código

<div class="contact-info-area white-bg section-pt" style="padding-top: 100px">
  <div class="container-fluid">
    <div class="row row-eq-height no-gutter">
      <div class="hidden-xs hidden-sm col-md-6 add-image-2" >
        <img src="http://regaltheme.com/tf/multi/hezul/hezul/assets/img/bg/add-2.jpg" width="100%">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6 separador">
        <div class="equal-style height-600 d-table" style="margin: auto;">
          <div class="row dt-cell text-center" style="color: #333333;">
            <div class="col-xs-12 col-sm-6 mobi-mb-30 separador-1">
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box mb-135">
                  <i class="fa fa-location-arrow fa-2x"></i>
                  <h6>DIRECCIÓN</h6>
                  <p style="font-size: 16px">
                    Blvrd Hacienda del Jacal 1303<br />Mansiones del Valle 76185 Santiago de Querétaro, Qro.
                  </p>
                </div>
              </div>
              <!-- Info Box End -->
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box">
                  <i class="fa fa-envelope-o fa-2x"></i>
                  <h6>Email</h6>
                  <p>
                    <a href="mailto:[email protected]" style="color: #333333!important; font-size: 16px">[email protected]</a><br>
                  </p>
                </div>
              </div>
              <!-- Info Box End -->
            </div>
            <div class="col-xs-12 col-sm-6 separador-1">
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box mb-135">
                  <i class="fa fa-phone fa-2x"></i>
                  <h6>TELEFONO</h6>
                  <p>
                    <a href="tel:+99-854-785-478-586" style="color: #333333!important; font-size: 16px;">+99 854 785 478 586</a><br>
                    <a href="tel:102-458-658-587-548" style="color: #333333!important; font-size: 16px;">102 458 658 587 548</a>
                  </p>
                </div>
              </div>
              <!-- Info Box End -->
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box">
                  <i class="fa fa-clock-o fa-2x"></i>
                  <h6>HORARIO</h6>
                  <p style="font-size: 16px;">Lun a Vie – 9:00 AM a 6:00 PM</p>
                </div>
              </div>
              <!-- Info Box End -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Espero que me puedan apoyar.

Saludos

1 respuesta 1

3

Puedes posicionar fácilmente en forma vertical cualquier elemento con las propiedades de flexbox.

cambie un poco tu código y agregue unos estilos personalizados usando solo flexbox que te pueden ayudar a que el diseño este mejor tanto en diferentes tamaños de pantalla.

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.total {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Permite tener cajas flexibles*/
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.separador {
  background: gray;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* Centra Horizontalmente*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* Centra Verticalmente */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Media Querys</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <link rel="stylesheet" href="Css/Estilos.css">
</head>

<body>

    <div class="contact-info-area white-bg section-pt total">
        <div class="container-fluid">
            <div class="row row-eq-height no-gutter">
                <div class="hidden-xs hidden-sm col-md-6 add-image-2">
                    <img src="http://regaltheme.com/tf/multi/hezul/hezul/assets/img/bg/add-2.jpg" width="100%">
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 separador">
                    <div class="equal-style height-600 d-table" style="margin: auto;">
                        <div class="row dt-cell text-center" style="color: #333333;">
                            <div class="col-xs-12 col-sm-6 mobi-mb-30 separador-1">
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box mb-135">
                                        <i class="fa fa-location-arrow fa-2x"></i>

                                        <h6>DIRECCIÓN</h6>
                                        <p style="font-size: 16px">
                                            Blvrd Hacienda del Jacal 1303<br />Mansiones del Valle 76185 Santiago de
                                            Querétaro, Qro.
                                        </p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box">
                                        <i class="fa fa-envelope-o fa-2x"></i>
                                        <h6>Email</h6>
                                        <p>
                                            <a href="mailto:[email protected]" style="color: #333333!important; font-size: 16px">[email protected]</a><br>
                                        </p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                            </div>
                            <div class="col-xs-12 col-sm-6 separador-1">
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box mb-135">
                                        <i class="fa fa-phone fa-2x"></i>
                                        <h6>TELEFONO</h6>
                                        <p>
                                            <a href="tel:+99-854-785-478-586" style="color: #333333!important; font-size: 16px;">+99
                                                854 785 478 586</a><br>
                                            <a href="tel:102-458-658-587-548" style="color: #333333!important; font-size: 16px;">102
                                                458 658 587 548</a>
                                        </p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box">
                                        <i class="fa fa-clock-o fa-2x"></i>
                                        <h6>HORARIO</h6>
                                        <p style="font-size: 16px;">Lun a Vie – 9:00 AM a 6:00 PM</p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

Por buenas practicas te recomiendo no agregar estilos dentro del HTML, preferiblemente crea tu CSS aparte y cambia o modifica lo que nesecites.

Tambien te invito a que leas la documentación de Bootstrap para comprender mejor su layout.

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.