2

Estoy tratando de hacer una sección que tenga 3 secciones, una alargada verticalmente y otras 2 a su lado derecho que queden ajustadas a la altura de esta primera, necesito que se adapte a moviles y tablets, pensaba que al estar usando bootstrap se adaptaría al tamaño pero no es así ya que cuando cambiamos de dispositivo aparece deformado.

introducir la descripción de la imagen aquí

La idea sería, que quedara de esta forma en formato ordenador para pantallas grandes, en el código se puede ver a pantalla completa a que me refiero, pero en movil para adaptarlo tal vez debería quedar así como la imagen inferior para que se viera correctamente.

introducir la descripción de la imagen aquí

Alguien sabría como ayudarme? gracias.

/* minislide 1*/
.minislide1{
    background-color: #ffffff;

    padding-bottom: 1rem;
    margin-bottom: 1.3rem;
}

.minislide1 img{
    width: 95%;
}

.minislide1 h2{
    font-size: 1.6rem;
    font-weight: 500;
    color: black;
    padding-top: 1rem;
}

.minislide1 p{
    font-size: 1rem;
    font-weight: 500;
    color: black;
}

   /* minislide 2*/
   .minislide2{
    background-color: #ffffff;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.3rem;
}

.minislide2 img{
    width: 95%;
}

.minislide2 h2{
    font-size: 1.6rem;
    font-weight: 500;
    color: black;
}

.minislide2 p{
    font-size: 1rem;
    font-weight: 500;
    color: black;
}
     <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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <div class=" gris">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h2>Lorem ipsum dolor sit amet</h2>
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor</p>
                    </div>
                    <div class="container-fluid">
                        <div class="row">

                            <div class='col-6 col-sm-6'>
                                <div class="row">
                                    <div class="col-sm-12"> <img src="https://images.unsplash.com/photo-1657299156261-4ce1d0a2cf5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="img-fluid">
                                    </div>
                                </div>
                            </div>

                            <div class='col-6 col-sm-6'>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <!-- miniSlide 1 -->
                                        <div class="row minislide1">
                                        <div class="col-6">
                                            <h2>Lorem ipsum dolor sit amet</h2>
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor</p>
                                        </div>
                                        <div class="col-6">
                                            <img class="img-fluid" src="https://images.unsplash.com/photo-1659976057522-817791f9bf3f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="imagen">
                                            </div>
                                        </div>
                                        <!-- END miniSlide 1 -->


                                    </div>
                                    <div class="col-sm-12 d-none d-md-block">

                                        <!-- mini Slide 1 -->
                                        <div class="row minislide2">
                                        <div class="col-sm-6">
                                            <h2>Lorem ipsum dolor sit amet</h2>
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor</p>
                                        </div>
                                        <div class="col-sm-6">
                                            <img class="img-fluid" src="https://images.unsplash.com/photo-1659976440475-5d6e1f43ddf7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="imagen">
                                            </div>
                                        </div>
                                        <!-- END miniSlide 2 -->



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

                        </div>
                    </div>


                </div>
            </div>

1 respuesta 1

3

Podrías construir una estructura similar a lo que buscas solamente con Boostrap, aprovechándote de su sistema de grid.

Los contenedores de colores son solamente para ilustrar el ejemplo. Para poder ver el salto entre dispositivos tendrías que reproducir el ejemplo en modo pantalla completa.

.contenedor {
  display: block;
  width: 100%;
  height: 100%;
  padding: 50px 0;
}

.naranja {
  background-color: orange;
}

.verde {
  background-color: green;
}

.violeta {
  background-color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-5">
      <div class="contenedor naranja"></div>
    </div>
    <div class="col-12 col-sm-7">
      <div class="row">
        <div class="col-6 col-sm-12">
          <div class="contenedor verde"></div>
        </div>
        <div class="col-6 col-sm-12">
          <div class="contenedor violeta"></div>
        </div>
      </div>
    </div>
  </div>
</div>

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.