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?
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.