A user seeks to create a full-width product grid with grey borders on their collection page, but initially only achieves a layout with gaps between items.
Initial Problem:
Solution Provided:
Another community member provides CSS code to:
ul#product-grid { gap: 0 }.card.card--standard.card--media { border: 3px solid rgba(0,0,0,0.3); }.collection .grid { gap: 0px; }Implementation:
Outcome:
The solution successfully removes gaps and adds borders. User asks about making the grid truly full-width, suggesting the discussion may continue regarding complete edge-to-edge layout.
Hi,
i’m trying to get my website to have a full width grid with grey border (like attached) but can only get it with gaps.
Can anybody help with the code please?
code in theme.liquid
ul#product-grid { gap: 0 !important; justify-content: center !important; } .grid--4-col-desktop .grid__item { border: solid 1px black; }Hi @visualess
Do you mean like this?
If it is check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.card.card--standard.card--media {
border: .3px solid rgba(0, 0, 0, 0.3);
}
ul#product-grid {
gap: 0;
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hey! @Made4uo-Ribe
Thanks for your response!
I added the code and it’s like this still. Am I missing something?
site: 4qs.uk
password: 44444
Add this one.
.collection .grid {
gap: 0px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Amazing thank you!
is it able to go full width or is that not an option?
