Responsive

Please, any help?

Hi there,

can you share a link to your site so we can see what the issue is?

Hi David,

It's WP Rocket and Elementor's problem

I have disabled CSS optimization in WP Rocket

The problem with Elementor, when I use the Products module and select that in mobile I want a single column, it does not occupy the entire width of the screen.

To solve the Elementor problem I have included this code:

@media (max-width: 768px) and (min-width: 350px) {
.elementor-widget-container .woocommerce .wc-columns-3 ul.products li.product,
.elementor-widget-container .woocommerce-page .wc-columns-3 ul.products li.product,
.elementor-widget-container .woocommerce-page.columns-3 ul.products li.product,
.elementor-widget-container .woocommerce.columns-3 ul.products li.product {
width: 95%;
margin-left: 2%;
float: left! important;
}
}
@media (max-width: 768px) and (min-width: 350px) {
.elementor-widget-container .woocommerce .wc-columns-4 ul.products li.product,
.elementor-widget-container .woocommerce-page .wc-columns-4 ul.products li.product,
.elementor-widget-container .woocommerce-page.columns-4 ul.products li.product,
.elementor-widget-container .woocommerce.columns-4 ul.products li.product {
width: 95%;
margin-left: 2%;
float: left! important;
}
}

The code works, but I don't know if what I have done is correct.

You can see the result here:

https://ortosureste.es/camas-elevacion-columnas-telescopicas/

Thanks

Glad to hear you found the solution - and thanks for sharing that!
It looks good to me!