Trinchera WP
En esta clase nos centraremos en adaptar la sección principal para dispositivos tablet. Es importante destacar que no implementaremos el desplazamiento horizontal, manteniendo solo el desplazamiento vertical ya existente.
Inicialmente, revisaremos los tamaños de las imágenes y los paddings para asegurar una correcta visualización en tablet. Veremos cómo ajustar el gap para lograr un espaciado adecuado entre los elementos, buscando la armonía visual con el diseño original.
Uno de los puntos clave será la implementación del botón de filtros. Discutiremos cómo mostrar el modal de filtros al hacer clic en este botón, reutilizando componentes ya existentes en el header. Nos aseguraremos de que el botón tenga el estilo adecuado, incluyendo:
flex, justify-between, items-center para el posicionamiento.gap.border, border-gray-300, rounded-2xl para darle una forma redondeada.p-3 para un buen espaciado interno.text-xs) y peso de fuente (font-semibold).Abordaremos los desafíos de centrado vertical de los elementos, especialmente con la presencia de bordes, y cómo asegurar que los cambios no afecten la visualización en dispositivos móviles. Utilizaremos clases como hidden lg:flex para controlar la visibilidad y el comportamiento de los elementos en diferentes tamaños de pantalla, garantizando que el diseño sea responsivo.
Exploraremos la creación de un efecto de degradado en el lateral de la sección, similar al diseño de referencia. Analizaremos diferentes enfoques para lograr este efecto, incluyendo el uso de pseudoelementos (::before o ::after) y propiedades como background-image con linear-gradient para crear una transición suave de color, como un fade con to-left y from-white. Veremos cómo posicionar correctamente este efecto y solucionar posibles problemas de overflow.
En esta clase, enfrentaremos y resolveremos problemas comunes de maquetación, como el ajuste de tamaños y el posicionamiento de elementos, para lograr un diseño coherente y funcional en diferentes dispositivos.