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
Topic summary
A Shopify store owner wants to modify their product grid layout to extend closer to the page edges with only 10px gaps on each side.
Initial Solution Provided:
- Custom CSS code was shared to adjust the
.product-grid-containerpadding and grid item widths for desktop views (min-width: 990px) - The code successfully achieved the desired effect on collection pages
Remaining Issues:
- Alignment problem: While the top row of products displays correctly, the bottom three products are now slightly misaligned
- Homepage request: The store owner also wants to apply the same edge-to-edge effect to the product collection section on their homepage
Screenshots were provided showing both the misalignment issue and the homepage section that needs modification. The discussion remains open with these two follow-up requests pending resolution.
1 Like
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;
}
}
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.
