Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Desafio Menu tablet

Hola me gustaria recibir feedback de lo que hice, gracias.

@media (min-width: 620px) and (max-width: 834px){

.menu__container{
    position:fixed;
    bottom: 0%;
    height: 85%;
    width: 74px;
}

.menu__lista{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    align-items: center;
}

.menu__lista li{

}

.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4){
    display: none;
}

.menu__itens{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

}

1 respuesta
solución!

¡Hola Jehovany!

Estás en el camino correcto, pero hay algunos ajustes que podrías hacer para lograr el diseño deseado.

En el código que proporcionaste, veo que estás utilizando la regla display: none; para ocultar ciertos elementos de la lista en el menú. Sin embargo, parece que estás aplicando la pseudo-clase nth-child de manera incorrecta. En lugar de seleccionar .menu__lista:nth-child(2), deberías aplicar la pseudo-clase a los elementos li dentro de .menu__lista.

Aquí tienes un ejemplo de cómo podrías corregir esa parte del código:

.menu__lista li:nth-child(2),
.menu__lista li:nth-child(3),
.menu__lista li:nth-child(4) {
  display: none;
}

Además, ten en cuenta que al fijar la posición del menú con position: fixed; y bottom: 0%;, es posible que el menú se superponga a otros elementos de la página. Asegúrate de probar el diseño en diferentes dispositivos y tamaños de pantalla para garantizar que se vea como se espera.

Espero que estos consejos te sean útiles para mejorar tu código. ¡Sigue adelante con tu desafío y no dudes en pedir más ayuda si la necesitas!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!