Increase gap between items in product grid

Hi,

I would like to increase the gap between items in the product grid to be more than 30, how can i do it?

Thank you!

Hi,

Could you please send us a link to your website so we can check what we can do there?

Kind Regards

Hi, sure, private link attached.

Hello,

Try this CSS. Add to Theme Settings > Custom CSS:

.products-spacing-30 {
    margin-left: -30px;
    margin-right: -30px;
}
.products-spacing-30 .product {
    padding-left: 30px;
    padding-right: 30px;
}

Increase/decrease the paddings as per your needs. Both values should be equal.

Best Regards

Hi,

Thanks for the CSS.

padding-left and padding-right works on desktop, but not on mobile browser (safari iphone). How can i get them to work on mobile browser as well please?

Note: padding-top and padding-bottom works on both desktop and mobile.

Hello.

Please add this code with this one:

@media (max-width: 768px){
   .products:not(.categories-style-carousel) .product {
   padding-left: 30px!important;
   padding-right: 30px!important;
}
    
    .products:not(.categories-style-carousel) {
    margin-left: -30px;
    margin-right: -30px;
}
}

Best Regards

hi, with your latest codes, it works partially for mobile, but doesn’t work for desktop anymore

Hi,

Try to add the following code snippets to the Custom CSS area in Theme Settings. Increase/decrease the paddings as your needs. Both pairs of values should be equal.

For desktop:

body .products-spacing-30 {
    margin-left: -30px;
    margin-right: -30px;
}

body .products-spacing-30 .product {
    padding-left: 30px;
    padding-right: 30px;
}

For mobile:

@media (max-width: 768px){
body .products:not(.categories-style-carousel) {
    margin-left: -30px;
    margin-right: -30px;
	}
	
body .products:not(.categories-style-carousel) .product {
    padding-left: 30px;
    padding-right: 30px;
}
}

Regards

Hi, i have done as you advised, it’s working for desktop, but not for mobile:

sorry, just realised i pasted in CSS Tablet.

Now that I have pasted in mobile CSS, it worked, but the items seems to be aligned to the sides instead of middle on my iOS screen.

Hi, instead of the codes you have given, i tried to put the following code in Global CSS, it seems to work well, may I know if there is any problem/issue with it?

.products-spacing-30 .product {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
}

@media (max-width: 768px){
   .products:not(.categories-style-carousel) .product {
   padding: 15px!important;
}
}

Hello,

Take the full code provided by Bogdan and insert it into Global CSS.

Best Regards

If I use Bogdan’s code, on mobile browser, the items are off centre (left column are totally to the left, right column is totally to the right, with a big gap in the center).

I think it’s due to the negative margin?

Hello,

Please check and make sure that you have added code provided by Bogdan, not mixture. If you still have the problem, provide your site admin access.

Best Regards

Hi,

I have done as per your instructions to copy all Bogdan’s code into Global CSS, you can refer to the private link on your mobile to see that there is no padding at the sides at all, and the top/bottom paddings are not there on both desktop and mobile.

Hi,

Since your initial request was to increase the default Space between products option to larger values, we prepared CSS code snippet that increases default maximum 30px space between product grid to larger values that you can insert by yourself.

The code I gave you works correctly. It increases the space between products on the product grid view. Please, check the following screenshots to compare the difference between default 30px value and value that you increased by custom code.

Desktop products with default 30px spacing:
Desktop products with your custom 100px spacing:
Mobile products with default 10px spacing:
Mobile products with your custom 100px spacing:
If you want to achieve another product grid view, describe it in more detail and we will prepare the CSS code snippet for you.

Regards

Hi Bogdan,

Thank you for the detailed explanations, and sorry for my incompleteness in describing my requirement. Please allow me to try again…

Problem: In the product grid, the items are too close to one another, and also to the sides of the screen.

Requirement: I would like to be able to adjust the padding around each item in the product grid, e.g. 40px padding on left and right of each item, 20px padding on top and bottom of each item.

Thank you for the superb support!

Hi,

By default, the negative margin is added to the products grid container and its value is equal to the product paddings to compensate side spacing, making all content aligned straight to the site container. This is how the default Bootstrap 3 grid works.

If you want to change this behavior you need to change negative margins value. For example, if you want to have the same padding from the sides of the screen you need to change the following values to zero.

Regards

Thank you so much!

Please refer to my private content for my little request, thank you!

Hello,

All the screens are deleted.

Best Regards

[Author]

Posts