Product Grid - Modify

[ellacoker]

Hello,

I would like to make my product grid expand to either size of the page with only a small gap of 10px. How can I do this? Thank you

URL: https://www.livwithin.com.au/collections/all

PW: pewpog

[Dan-From-Ryviu]

Hi @ellacoker

Please go to Sales channels > Online Store > Themes > Customize > click settings icon > Custom CSS, add this code below

@media (min-width: 990px) {
    .product-grid-container .collection.page-width { padding: 0 10px !important; }
    .product-grid-container .grid--4-col-desktop .grid__item {
        max-width: calc(26% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important;
    }
}

[ellacoker]

Hi Dan,

Thank you very much for this - It worked. Two things though.

When I did it, the top ones are perfect but the bottom 3 products now are slightly out of line.

And number two, i would like this same effect (the products coming right to the edge) for my home page product collection, how can I do this too? Thank you so much,

I have atttached some screenshots.