increase spacing between products

This is how products grid looks like now: https://postimg.cc/K4WdvkNJ – there is no spacing between products

However, if I want to add spacing, this happens: https://postimg.cc/qhSj0nTK – there are only 3 colums of products and big white space

Apparently, changing the site width doesn’t work, because the products size changes with it.

So how can I make the products width smaller so they can fit 4 products in a row, with 15 px spacing between them?

Or how can I change site width and keep the products size the same, so again it fits 4 products?

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.product-grid-item.product.wd-hover-standard.col-lg-3 {
    max-width: 20%;
}

Best Regards

Thank you! It works on desktop.

Is the code the same for mobile?

I tried to do it on mobile and set the margin-right to 10px and max-width to 47%, but it is not centered – https://postimg.cc/9Dn24Nb6

Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-grid-item {
margin-right: 5px;
margin-left: 5px;
}

Best Regards

Hello! I am reaching out again because I noticed a problem regarding mobile users that have the big/zoomed in text feature turned on (from mobile settings)

Basically, this is how it looks for them – https://postimg.cc/G9dCWjtM

There is only one column of products and the Search icon isn’t fully showing.

The icon isn’t that big of a problem, as much as the product column is.

Is there a solution to this without changing how it looks for normal mobile users?

Hello,

The issue is caused by the margin values you added to make the space between the Grid.

Sorry but it’s not possible to fix without removing the CSS styling for the grid for Mobiles.

Best Regards

isn’t it possible to change it for a lower media? eg. for mobile is 768px, maybe I could lower that?

this doesn’t happen on bigger websites so there has to be a solution

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-grid-item.product.wd-hover-standard.col-lg-3 {
    max-width: 46%;
}

Otherwise, if still issue will not solve then please share the WP admin login details.

Best regards.

It works, but the right margin seems to be longer than the left again – https://postimg.cc/G99hhpcv

I searched the code for margin-right sizes bigger than margin-left but cant find anything

I will leave the login details below so you can take a look

Hello,

Please check it now, I have added the small custom CSS code for mobile in theme settings.

Best Regards.

it seems fine now, thank you.

Hello,

You are Most Welcome.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts