Hello,
Is someone able to tell me the code to make my products come full width? so that there is only a tiny gap either side?
Topic summary
A user seeks to display product grids at full width with minimal side margins on their Shopify store.
Initial Problem:
- Product grid has excessive spacing on both sides
- User attempted a solution in base.css without success
Solution Provided:
Navigate to Online Store → Themes → Customize → Collection page → Product grid section, then add custom CSS:
- Sets container padding to 5px
- Adjusts grid item width calculations for 4-column desktop layout
- Uses media queries for responsive behavior
Follow-up Issue:
The homepage featured collection appears off-centered despite acceptable side spacing.
Additional Solution:
Apply similar CSS to the Featured Collection’s custom CSS field:
- Removes scroll padding and general padding from slider component
- Eliminates left margin from first slider item
- Centers the collection properly
Status: Both issues resolved with custom CSS targeting specific theme sections. User confirmed the collection page solution works perfectly.
Do I put this in the base.css part? Unfortunately I tried and it didnt work
@ellacoker Please follow the below steps to display product cards in full width with tiny spaces on sides. Let us know whether it is helpful for you.
- Go to “Online Store” → “Themes”.
- Click “Customize” button from the current theme.
- Go to Collection page and then click ''Product grid" section.
- Then scroll down and paste the below code at ‘Custom CSS’ option and save changes.
.product-grid-container .collection{
padding: 0px 5px !important;
}
@media screen and (min-width: 990px) {
.product-grid-container .grid--4-col-desktop .grid__item {
width: calc((100% - 6px) / 4);
max-width: calc((100% - 6px) / 4);
}
}
Now the result look like below attached image.
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
This is perfect, can I use a similar code for my home page featured collection? I dont mind the spacing either side but it seems to be off centred
@ellacoker Glad the previous solution worked for the collection page! Please like and accept the solution.
As you requested, yes, we can absolutely use a similar approach for the homepage featured collection. If the spacing on either side looks off-centered, please paste the following CSS code in the ‘Featured Collection’ custom CSS field to align it properly in the center:
.slider-component-full-width .slider--desktop {
scroll-padding: 0px;
padding: 0px !important;
}
.slider-component-full-width .slider--desktop .slider__slide:first-child{
margin-left: 0px !important;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.