Es momento de crear el menú de navegación para la versión móvil o responsive de nuestra tienda virtual y esta estructura presenta tres listas con distintas opciones. Recuerda que configurar esta versión del sitio ayuda a que pueda fluir mejor en todos los tamaños de pantalla y ahorra tiempo porque no necesitas tener dos versiones de un sitio web.
Estructura semántica de un menú para dispositivos móviles
El menú para la version móvil de nuestra tienda contiene tres secciones y al ser listas las podemos contener en etiquetas ul. Primero, debemos generar el contenedor principal que posibilitará su posterior estilización.
<div class=""mobile-menu"">
En segundo lugar, definimos las secciones. La primera sección corresponde a las categorías
Tal como hicimos con el menú desktop, para estilizar esta vista, debemos quitar la decoración por defecto de las listas y etiquetas a, separ los contenedores definiendo margin y padding; añadir los colores y estilos de fuente.
Así quedaría nuestro CSS:
.mobile-menu {padding: 24px;}.mobile-menu a { text-decoration: none;color:var(--black); font-weight: bold;/* margin-bottom: 24px; */}.mobile-menu ul {padding:0;margin: 24px 00; list-style: none;}.mobile-menu ul:nth-child(1){ border-bottom: 1px solid var(--very-light-pink);}.mobile-menu ul li { margin-bottom: 24px;}.email{ font-size:var(--sm); font-weight:300;}.sign-out { font-size:var(--sm);color:var(--hospital-green);}
En la última sección tenemos un problema de especificidad. No se está aplicando el font-weight de la clase email, ni el color de la clase sing-out.
La especificidad consiste en dar un valor a una regla CSS sobre qué tan específico es el estilo, esto para que los navegadores puedan saber qué estilos aplicar sobre otros, independientemente de dónde se encuentren en el código. El estilo se aplicará donde la especificidad sea mayor.
Al entender los tipos de especificidad, comprendemos que demos aumentar el valor o peso de las clases email y sing-out.
Existen varias formas de conseguirlo. Una es hacer uso de !important.
Creación de Menú Responsive en HTML y CSS para Móviles
Recursos
Resumen
Es momento de crear el menú de navegación para la versión móvil o responsive de nuestra tienda virtual y esta estructura presenta tres listas con distintas opciones. Recuerda que configurar esta versión del sitio ayuda a que pueda fluir mejor en todos los tamaños de pantalla y ahorra tiempo porque no necesitas tener dos versiones de un sitio web.
Estructura semántica de un menú para dispositivos móviles
El menú para la version móvil de nuestra tienda contiene tres secciones y al ser listas las podemos contener en etiquetas ul. Primero, debemos generar el contenedor principal que posibilitará su posterior estilización.
<div class=""mobile-menu"">
En segundo lugar, definimos las secciones. La primera sección corresponde a las categorías
Tal como hicimos con el menú desktop, para estilizar esta vista, debemos quitar la decoración por defecto de las listas y etiquetas a, separ los contenedores definiendo margin y padding; añadir los colores y estilos de fuente.
En la última sección tenemos un problema de especificidad. No se está aplicando el font-weight de la clase email, ni el color de la clase sing-out.
La especificidad consiste en dar un valor a una regla CSS sobre qué tan específico es el estilo, esto para que los navegadores puedan saber qué estilos aplicar sobre otros, independientemente de dónde se encuentren en el código. El estilo se aplicará donde la especificidad sea mayor.
Al entender los tipos de especificidad, comprendemos que demos aumentar el valor o peso de las clases email y sing-out.
Existen varias formas de conseguirlo. Una es hacer uso de !important.
Hola, para resolver el problema de especificidad y no colocar el !important solamente tuve que colocarle mas peso a lo que quería modificar. En este caso, en lugar de colocarle solamente la clase:
.sign-out
Se la cololque con uno de sus padres, para este ejemplo fue mobile-menu, quedando asi:
.mobile-menu .sign-out
Seria que se le apliquen estilos a aquellos elementios con la clase sign-out que esten dentro de otro elemento con la clase .mobile-menu Entonces aquí en peso se vuelve de dos clases, sobreescribiendo el anterior :D.
Buenas así lo resolví. Converti el contenedor a display:flex y puse la propiedad justify content: space-between.
Al tercer ul le aumente el margin-bottom para que no quedara tana abajo
Estoy muy feliz dde estos cursos prácticos, al inicio del curso no podía maquetar ni haces los estilos de una clase yo solo (sin ver la solución de la maestra), poco a poco fuí aprendiendo la manera en que resuelve los problemas la maestra y ya puedo hacer los estilos de una clase sin antes ver su solución 😁 tmb esta fue mi primer clase en la que yo hice el maquetado en html, es algo sencillo pero algo es algo jaja 👍 de ahí la importancia de estos cursos prácticos, es oro puro saber cómo profesionales resuelven problemas similares a los que nosotros nos toparémos en un futuro 🥳
👉 Se debe pensar una solución al reto desde que empezamos a maquetar html, para evitar el uso de position absolute, que se considera una mala práctica 😨, podemos separar la estructura del menú en 2, la parte superior y la parte inferior para que simplemente tengamos que hacer display: flex; flex-direction: column; al padre que envuelve estas dos partes y separarlas con un justify-content: space-between como lo hizo la maestra en clases pasadas 👌
Si están usando Visual Studio Code y quieren comentar una línea de código o varias , solo tienen que seleccionar lo que quieren comentariar y presionar las teclas CTRL + K + C y tambien funcionan para descomentariar
No sé si solamente es mi percepción y @teffcode está equivocada.
¿"CATEGORIES" no debería ser solamente un título en lugar de haberle asignado la etiqueta <a>?
