Hola @miriam24, entiendo perfectamente el problema. Los diseños con flexbox y elementos de altura variable son un desafío común. La versión 1.7.8.11 con el tema Classic se beneficia mucho de un enfoque más robusto para las cuadrículas.
Para conseguir una cuadrícula de 2 columnas en móvil que mantenga las alturas de las tarjetas alineadas, te recomiendo usar display: grid en lugar de flexbox. Grid está diseñado precisamente para este tipo de maquetaciones y gestiona las alturas de fila de forma automática.
Aquí tienes la modificación que deberías añadir a tu themes/classic/assets/css/custom.css:
@media (max-width: 767px) {
#content .products {
display: grid; /* Usamos Grid para la cuadrícula */
grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
gap: 15px; /* Espacio uniforme entre las tarjetas */
}
#content .products article.product-miniature {
height: 100%; /* Asegura que todas las tarjetas ocupen la altura completa de su celda */
display: flex; /* Mantenemos flex para alinear contenido dentro de la tarjeta */
flex-direction: column;
Explicación de los cambios:
display: grid;: Cambiamos el contenedor de flex a grid. Esto le dice al navegador que trate los hijos directos como elementos de una cuadrícula.grid-template-columns: repeat(2, 1fr);: Define dos columnas, cada una ocupando una fracción (1fr) del espacio disponible, lo que las hace del mismo ancho.gap: 15px;: Establece un espacio uniforme de 15 píxeles entre las filas y columnas. Es más limpio que los márgenes. height: 100%;: Aplicado a product-miniature, esto hace que cada tarjeta ocupe toda la altura de su celda de la cuadrícula, garantizando que todas las tarjetas en una fila tengan la misma altura visualmente. display: flex; y flex-direction: column;: Dentro de cada product-miniature, mantenemos display: flex para poder alinear y distribuir el contenido (imagen, título, precio, etc.) verticalmente si es necesario.
Con esto, tus tarjetas de producto deberían verse alineadas y uniformes en dispositivos móviles.