Return to previous page

How do I make the grid display 4 products instead of 5 on mobile?

This topic has 6 replies, 3 voices, and was last updated 8 hours, 54 minutes ago ago by Goostaf

Goostaf

Participant

September 18, 2024 at 09:52

Hello, we are doing a grid display of 5 in a row and a load more button, can we make it so that on mobile it initially displays 4 products only to make it look nice

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#414855 Copied Theme version: 9.3.3

5 Answers

Rose Tyler

Support staff

September 18, 2024 at 12:45

Hello, Goostaf,

Thank you for reaching out to us with your request.

There is no such option, unfortunately.

Best Regards,
8Theme’s Team

#414882 Copied

Goostaf

Participant

September 18, 2024 at 12:47

I remember exactly that you had a theme with a solution for me, I can’t find it, there was a css code that hid the fifth product on a mobile device just

#414884 Copied

Goostaf

Participant

September 18, 2024 at 13:08

there was a style that hid 1 product on the mobile and only 4 were shown

#414892 Copied
Luca Rossi

Support staff

September 18, 2024 at 17:17
Hi @Goostaf,

Can you try with this custom CSS codes?
```
.etheme_products .products-loop > div:nth-child(5n+1) {
    display: none;
}
```
Hope it helps!
#414946 Copied
Goostaf

Participant

September 18, 2024 at 17:24

Yes, what is needed, the question is, is it possible to make 6 displayed on the mobile through the code as well? On PC 5, on mobile 6

#414948 Copied
Tagged: mobile display settings, mobile woocommerce configuration, product display customization, product grid adjustment, woocommerce templates, wordpress woocommerce
Viewing 6 results - 1 through 6 (of 6 total)