Avisos
Vaciar todo
Plugins WordPress
4
Respuestas
2
Usuarios
0
Reactions
12
Visitas
Topic starter
Buenas, al cambiar el css en versión móvil en la pagina de marcas me deja la primera vacía, en tablet y escritorio sale bien.
ejem: Katia archivos - Mercería Ninot
código que añadí en apariencia - personalizar
/* --- SOLO MÓVILES ≤780px: 2 columnas, impar al final --- */
@media (max-width: 780px) {
body.tax-product_tag ul.products,
body.tax-product_brand ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* siempre 2 columnas */
gap: 8px !important; /* espacio entre productos */
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.tax-product_tag ul.products li.product,
body.tax-product_brand ul.products li.product {
width: 100% !important; /* ocupa toda la celda */
box-sizing: border-box !important;
margin: 0 !important;
}
}
Contenido solo visible a usuarios registrados
Respondido : 08/03/2026 6:22 pm
Hola Pedro,
Es posible que el error sea porque al convertir ul.products en grid los pseudoelementoes ::before y ::after que WooCommerce o el propio tema usa como clearfix tambein entran al grid, esto hace que el ::before ocupe la primera celda vacia y por ello el primerp productos real se ve en la segunda columna en movil, para solucionarlo reemplaza este codigo que nos indicas por el siguiente:
/* --- SOLO MÓVILES ≤780px: 2 columnas --- */
@media (max-width: 780px) {
body.tax-product_tag ul.products,
body.tax-product_brand ul.products {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Evita que los clearfix del tema ocupen una celda del grid */
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.tax-product_brand ul.products::before,
body.tax-product_brand ul.products::after {
content: none !important;
display: none !important;
}
body.tax-product_tag ul.products li.product,
body.tax-product_brand ul.products li.product {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
float: none !important;
clear: none !important;
}
}
Verificalo y nos comentas si con ello el grid se visualiza de forma correcta en movil.
Un Saludo
Respondido : 08/03/2026 10:14 pm
Topic starter
Buenas, funcionando, daros las gracias a todos por vuestra paciencia, ha costado varios temas pero lo hemos conseguido, gracias
Respondido : 09/03/2026 4:10 pm
Hola Pedro,
Enhorabuena ha funcionado como necesitas, es un placer para nosotros siempre poder ayudarte.
No dudes en escribrinos si tienes cualquier otra consulta.
Un Saludo 😊
Respondido : 09/03/2026 4:37 pm
