Avisos
Vaciar todo
Buenas tardes, Woocommerce por defecto solo muestra 1 columna en los dispositivos móviles. Tengo un código CSS que permite ver los productos en 2 columnas en el tema móvil.
Ahora me gustaría moficar ese código para que solo mostrara 2 columnas en la página principal de mi web, en el resto de la web quiero dejarlo nativo.
¿Qué tendría que añadir al siguiente código para que solo hiciera cambios en la home page?
/*Muestra 2 columnas movil*/
.site-main ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}
.site-main ul.products li.product:nth-of-type(2n) {
margin-right: 0;
}
@media (min-width: 768px) {
.site-main ul.products li.product:nth-of-type(2n) {
margin-right: 5.8823529412%;
}
}
Contenido solo visible a usuarios registrados
Respondido : 19/02/2024 4:18 pm
Hola Tomás,
Para que se aplique solo en tu pagina de inicio tienes que añadirle la clase .home tu código, por ejemplo
.home .site-main ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}
.home .site-main ul.products li.product:nth-of-type(2n) {
margin-right: 0;
}
@media (min-width: 768px) {
.home .site-main ul.products li.product:nth-of-type(2n) {
margin-right: 5.8823529412%;
}
}
Puedes probarlo y verificar si con ello te funciona
Un Saludo
Respondido : 19/02/2024 5:23 pm
Hola Tomás,
Gracias a ti, es un placer para nosotros siempre poder ayudarte.
No dudes en escribirnos si tienes cualquier otra consulta.
Un Saludo 😊
Respondido : 19/02/2024 7:12 pm
