es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

optimizar `vh-100` en responsive

17 Jul, 2023 Programación

Tengo 2 columnas en la página “col-lg-8” y “col-lg-4”. Para “col-lg-4” quiero que ocupe toda la altura de la página y le doy “vh-100”. Pero la altura en tabletas y dispositivos móviles es la misma (muy larga). ¿Cómo puedo solucionarlo?

<div class="col-lg-4 vh-100 d-flex justify-content-center align-items-center auth-sidebar">
    <img src="../assets/img/Authentication.svg" alt="Autenticar" class="h-75 w-75">
</div>
Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la columna se extienda por toda la altura de la página solo en dispositivos grandes y ajustar su altura en dispositivos más pequeños, puedes usar consultas multimedia que apunten a esos dispositivos específicos. Por ejemplo, podrías agregar el siguiente CSS:

    @media (max-width: 991.98px) { 
  .auth-sidebar.vh-100 {
    height: auto;
  }
}

    Esto eliminará la clase vh-100 en dispositivos con un ancho máximo de 991.98 píxeles (es decir, tabletas) y en su lugar permitirá que la altura se ajuste automáticamente según el contenido. Puedes ajustar el valor de píxeles según sea necesario para apuntar a diferentes anchos de dispositivo. Ten en cuenta que esto asume que tu div auth-sidebar tiene un contenedor principal con la clase row. Si no es así, es posible que debas ajustar el CSS en consecuencia.

Comments are closed.