adjusting shop page gutter size

[wayward_studio]

Hi team,

I’ve just changed the layout of my shop page and would like to decrease the gutter size horizontally and vertically around the products.

I remembered that I had asked for some code last time I edited using a different template. I found the following code in my custom CSS that I think may be related to that, or if it isnt I would like to know if I can delete this?

The code is:

.page-heading-hidden+.inner-page-wrap.woocommerce-shop-page {
margin-top: 0px;
}

.woocommerce ul.products.multi-masonry-items.gutters li.product {
padding-bottom: 20px!important;
margin-bottom: 0;
}
.woocommerce ul.products li.product {
padding: 0 10px;
}

Thank you for your assistance as always!

[David Martin – Support]

You can adjust the gutter padding and bottom margin using this:

.woocommerce .products .product.product-display-gallery, 
.woocommerce .products .product.product-display-gallery-bordered, 
.woocommerce .products.product-type-gallery .product, 
.woocommerce .products.product-type-gallery-bordered .product {
    margin-bottom: 0px;
}
.woocommerce ul.products li.product {
    padding: 0 0px;
}

[wayward_studio]

This reply has been marked as private.

[David Martin – Support]

Glad to help you.

The layout is also adjust using Masonry fitRows for the grid layout so that could explain the slight discrepancy you describe.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

Thanks.

[wayward_studio]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi @wayward_studio

Please try adding this CSS, and you can adjust as you like:

.masonry-items .blog-item {
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

– Ed

[wayward_studio]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

The url you placed above is returning Not Found.
Can you provide a new url and describe exactly what you want to change?

Thanks

-Rui

[wayward_studio]

This reply has been marked as private.

[David Martin – Support]

This will change all masonry blog items.

Your page contains Page Builder image assets, not masonry blog items – I am not clear on what you want to change now. Please clarify.

Thanks.