[Support request] Responsive

[JAVIER]

Hi,

Product listings do not display well on mobile.

I have configured the theme so that 4 columns are displayed on PC, 2 columns on tablet and 1 column on mobile.

But on the mobile you still see 4 columns.

Where is the problem?

Thanks

[JAVIER]

Please, any help?

[David]

Hi there,

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

[JAVIER]

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

[David]

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

[Author]

Posts