@media (min-width: 834px) {
.menu__container {
position: fixed;
width: 80px;
height: 88.64%;
}
.menu__lista {
flex-direction: column;
height: 60%;
}
}
@media (min-width: 834px) {
.menu__container {
position: fixed;
width: 80px;
height: 88.64%;
}
.menu__lista {
flex-direction: column;
height: 60%;
}
}
¡Hola Orlando!
Basándome en tu duda, parece que estás tratando de agregar formato al menú lateral para tablets usando CSS y Flexbox. La regla @media que has utilizado parece estar dirigida a pantallas con un ancho mínimo de 834px, lo cual es correcto según el contexto que has proporcionado. Sin embargo, veo que estás definiendo el ancho y alto del contenedor del menú y la altura de la lista en porcentajes, lo cual puede no ser la mejor práctica, ya que puede resultar en un diseño inconsistente en diferentes dispositivos.
Podrías considerar utilizar valores absolutos para el ancho y alto del contenedor del menú, y para la altura de la lista, podrías utilizar flex-grow para que ocupe el espacio disponible. Algo así:
@media (min-width: 834px) {
.menu__container {
position: fixed;
width: 74px; /* Cambiado a valor absoluto */
height: 100vh; /* Cambiado a valor absoluto */
}
.menu__lista {
flex-direction: column;
flex-grow: 1; /* Ocupa el espacio disponible */
}
}
Esto asegurará que el menú lateral se vea consistente en tablets y se ajuste correctamente al tamaño de la pantalla.
Espero que esta sugerencia te sea útil. ¡Buena suerte con tu proyecto!
Espero haber ayudado y buenos estudios!