Atelier theme -white gaps around product titles and grid rows

Shopify Discussion
1

Hi everyone,

I’ve tried the following code and it works perfectly on desktop. However, I’m running into an issue on the mobile version.

On mobile, there is a white gap on the sides of the titles and prices, and also a gap between the two product rows. On desktop everything looks exactly how I want it.

Could someone help me adjust the CSS so the spacing is removed on mobile?

Here’s the code I’m currently using:

/* PRODUCT COLLECTION CARD COLOR */
@media screen and (min-width: 750px) {
.product-grid {
–product-grid-gap: 10px;
}
}

.group-block.group-block–height-fill.group-block–width-fill.border-style.spacing-style.size-style {
background: #f3f3f3;
padding-bottom: 20px;
}

Ideally, I’d like the mobile layout to match the clean spacing of the desktop version without the side gaps or extra space between rows.

Any help would be greatly appreciated. Thanks!

Screenshot 2026-03-08 at 02.28.38
Screenshot 2026-03-08 at 02.28.381760×1510 161 KB

1 Like
2

Hi @runwayfashion

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

.product-card {
    background: #f3f3f3;
}

image
image741×550 48.7 KB

3

Thank you this worked.

1 Like
4

Hi @runwayfashion

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

Best regards,
Devcoder :laptop: