Number of products per row won’t change on mobile or tablet

fudjshop
(@fudjshop)

4 years, 9 months ago

Hi,

I’m using OceanWP and Elementor. I have the number of products per row set to 6 on desktop, 5 on tablet and 3 on mobile. For some reason when I am changing the number of products per row for mobile and tablet through customise >woocommerce> archives, it’s not doing anything and keeps showing 3 products per row on tablet and mobile. It’s working if I change it for desktop however.

Any ideas on how I can get this to work?

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Thread Starter fudjshop
(@fudjshop)

4 years, 9 months ago

I forgot to add that this was working about 2 months ago when I was working on the site, I’ve just come back to it after a break and found it’s stopped working – I’ve not changed anything since.

Amit Singh
(@apprimit)

4 years, 9 months ago

Hello,

Try editing the custom archive template using Elmentor and check the product grid settings from there. Have you updated theme and plugins to the latest version?

Thread Starter fudjshop
(@fudjshop)

4 years, 9 months ago

Hi Amit,

Thanks for the reply – it’s the archive template I’m editing in Elementor but on the Archvive Widget, theres no option to change number of products per row – a message shows stating that it needs to be done through Woocommerce customize

Amit Singh
(@apprimit)

4 years, 9 months ago

I checked the source code and it seems the elementor override the css which is causing this issue. Can you try to switch theme to default wordpress theme temporary and check it works properly or not?

Thread Starter fudjshop
(@fudjshop)

4 years, 9 months ago

Hi,

I’ve tried switching to the Hello Elementor theme but no difference. I’ve also changed to the default Twenty Nineteen WordPress theme – that’s even worse – I only get 3 products per row on desktop even when it’s set to 6 🙁

Amit Singh
(@apprimit)

4 years, 9 months ago

It’s mean it is not a theme related issue. Can you try to disable/enable plugin obe by one to check for a possible conflict? Also, try to contact the Elementor support for this issue.

Thread Starter fudjshop
(@fudjshop)

4 years, 8 months ago

Hi Amit,

Thanks for the reply, I’ve disabled all plugins but the issue still occurs. Is there any way of solving the issue even temporarily through CSS?
Amit Singh
(@apprimit)

4 years, 8 months ago
Hi,

try using the below css code to do it –
```
@media (max-width: 767px) {
.elementor-element.elementor-products-grid ul.products {
    grid-template-columns: repeat(3,1fr);
}
}
```
Thread Starter fudjshop
(@fudjshop)

4 years, 8 months ago

Thanks Amit, that’s great!

I’ve managed to sort it using the above. At least temporarily anyway

Amit Singh
(@apprimit)

4 years, 8 months ago

You’re welcome!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Number of products per row won’t change on mobile or tablet’ is closed to new replies.

Tags