A user successfully configured their desktop product grid to display full-width with no gaps, but encountered spacing issues on mobile view—specifically unwanted grid gaps and a small gap on the right side of the screen.
Initial Solution:
Alternative Solution:
Status: The discussion remains open as the original poster hasn’t confirmed whether the alternative solution fully resolves the right-side gap issue. Both solutions involve adding CSS to the theme’s Custom CSS section.
I was able to get my desktop page setup exactly how I want thanks to moeed, full width and no grid gap, but I’m still having an issue with the mobile width and grid gap. Any help would be appreciated.
I have attached a picture of what I’m looking to get and an image of the code i used for the desktop layout.
My website
example of what i need (mobile view)
Hi @MaiaMonange,
Please go to Customize > Theme settings > Custom CSS and add code:
@media screen and (max-width: 749px) {
.collection slider-component {
padding: 0;
}
.collection .grid {
margin-top: 0;
}
}
If I helped you, then a Like would be truly appreciated.
that worked but i still have a small gap on the right side of the mobile view screen
THis code can be pasted into “Custom CSS” of the product grid section:
slider-component.page-width {
padding: 0;
}
.product-grid {
--grid-mobile-horizontal-spacing: 0px;
--grid-mobile-vertical-spacing: 0px;
border-top: var(--border-width) solid rgba(var(--color-foreground),var(--border-opacity));
margin: -1px 0 0 0;
}
.product-grid .card {
border-width: 0 1px 1px 0;
}
