Remove Spacing Between Product Cards in Mobile: Dawn Theme

Store Design
, , ,

Topic summary

A user seeks to remove padding and spacing between product cards on mobile devices for their Dawn theme store (blinglittlething.com) without affecting desktop layout or other page elements.

Initial Solutions Attempted:

  • BSS-Commerce provided CSS code targeting .facets-vertical.page-width.collection-page and .collection .grid__item with mobile media queries
  • PageFly-Kate suggested CSS targeting #product-grid-container.product-grid with gap: 0 and adjusted grid spacing

Current Issue:
After implementing PageFly-Kate’s code (which initially didn’t work due to a minor error), the spacing was successfully removed. However, this created a misalignment problem between the product grid and the facet container on mobile.

Status:
The discussion remains ongoing. The user notes they’re a beginner and suspects the grid sizing needs adjustment to align with other page sections. PageFly-Kate has directed them to another community thread addressing product count/facet customization for a potential solution to the alignment issue.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

my website: blinglittlething.com

I want to do this, please help:

Every change is only for smaller screens,

  1. Remove padding in main collection page

  2. Remove space between product cards completely.

  3. This should not impact any other grid items in the website.

Is there some coding possible for this? Please look into it. Here’s a screenshot reference of what i am looking for:

Screenshot 2023-02-07 005004.png
Screenshot 2023-02-07 005004.png500×787 385 KB

2

Hi @blinglittlethin

Please follow these steps:

  • Step 1: At Shopify Admin, select Online Store → Themes → Edit Code

  • Step 2: Find and open the theme.css file, then add this code at the end of the base.css file:

@media screen and (max-width: 749px){
  .facets-vertical.page-width.collection-page {
     padding: 0 !important;
  }

  .collection .grid__item.collection-page {
     max-witdh: 100% !important;
  }

  .collection .grid.collection-page {
     column-gap: unset;
  }
}
  • Step 3: Find and open the theme.liquid file, add this code above as shown below:

view - 2023-02-07T140329.948.png
view - 2023-02-07T140329.948.png1279×855 58.4 KB

I hope that this can help you solve the issue.

3

it did nothing.

My website is www.blinglittlething.com

theme is dawn.

1 Like
4

Hi @blinglittlethin ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.product-grid-container #product-grid {
    gap: 0 !important;
    --grid-desktop-horizontal-spacing: 1px !important;
}

I hope it would help you
Best regards,

Kate | PageFly

5

does nothing. probably missing some steps

1 Like
6

Hi @blinglittlethin ,

I checked again. Maybe you can fix it?

PageFlyKate_0-1675861744797.png
PageFlyKate_0-1675861744797.png409×379 115 KB

7

hey, so yes i found that there was some minor issue, fixed it. Thank you.

But now what is happening is that it is becoming mis-aligned with this facet container. (I applied the code only for smaller screens so check with a smaller perspective : www.blinglittlething.com )

Screenshot (250).png
Screenshot (250).png1920×923 224 KB

here is a sample ss. can you please help.

and not just that one, i guess, it must’ve been misaligned with all the other sections on the page as well, since we have only edited the grid, the others need to be sized down or the grid needs to be sized up i guess. i’m a beginner so that’s just some guess work.

1 Like
8

Hi @blinglittlethin ,

In this topic, I have a solution to handle this problem for you. You can try it out:

https://community.shopify.com/c/shopify-design/customise-quot-product-count-quot-facet/td-p/1937467

I hope it would help you
Best regards,

Kate | PageFly