@miguel_deco50, el problema de las alturas desiguales es clásico con flexbox si no se configuran bien los flex-item o si el contenido empuja demasiado. El flex: 0 0 calc(...) está bien para el ancho fijo, pero para que todas las tarjetas tengan la misma altura, necesitas que los elementos flex crezcan y se ajusten de manera uniforme. Además, podemos mejorar el efecto hover.
Aquí te dejo una versión del CSS para themes/classic/assets/css/custom.css que debería funcionar mejor, asegurando que las tarjetas tengan la misma altura y un efecto de elevación más limpio:
#content .links ul.my-account-list {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Espacio entre las tarjetas */
list-style: none; /* Quitar viñetas */
padding: 0;
margin: 0;
}
#content .links ul.my-account-list li {
flex: 1 1 calc(33.33% - 20px); /* 3 columnas, permite crecer y encoger, y ajusta el ancho */
He hecho varios ajustes:
gap: 20px;: En lugar de márgenes negativos en el contenedor y positivos en los ítems, gap es mucho más limpio para el espaciado entre elementos flex.list-style: none; padding: 0; margin: 0;: Limpiamos estilos por defecto de la lista.flex: 1 1 calc(33.33% - 20px);: flex-grow: 1 permite que los ítems crezcan para ocupar el espacio disponible, ayudando a las alturas uniformes.display: flex; flex-direction: column; justify-content: space-between;: Esto convierte cada li en un contenedor flex en sí mismo, permitiendo más control sobre el contenido interno y asegurando que, si hay un icono y texto, se distribuyan correctamente.min-height: 150px;: Establece una altura mínima para todas las tarjetas, forzando la uniformidad incluso si el contenido es muy corto.- Transiciones y
box-shadow: Ajustadas para un efecto hover más profesional.
- Estilo del enlace
a: Aseguramos que el enlace ocupe todo el espacio de la tarjeta para una mejor usabilidad y clicabilidad.
Prueba esto en tu custom.css y nos dices si funciona.