Dawn theme: increase space between product cards in the grid

Store Design

Topic summary

A user seeks to increase spacing between product cards on collection pages in the Dawn theme for desktop.

A solution is provided involving custom CSS code added to the base.css file, targeting .product-grid elements with padding and margin adjustments within a media query for screens wider than 750px.

The original poster reports the code doesn’t work, prompting a follow-up question about where exactly the code was placed.

Another user confirms the desktop solution works and requests similar code for homepage collection grids.

Two additional users ask for an equivalent mobile version of the spacing code, noting the current solution only affects desktop views.

The discussion remains open with the mobile spacing request unresolved.

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

Hi! How do I increase space between the product cards on collection pages on desktop version?

Right now the product listings are too close to each other. Link: https://bit.ly/3RA22WP

1 Like
2

@nd500

oh sorry for that issue, can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
.product-grid.grid {
    margin-left: -25px;
}
.product-grid .grid__item {
    padding-left: 25px;
}
}
1 Like
3

It does not work :confused:

1 Like
4

@nd500

can please let me know where did you add this code and which spacing do you have add or less

5

Hi! This worked for me! Can you tell me also how to add more space between the collection grid on homepage?

www.assifassefi.com pw skawst

Thank you!

6

Is there an equivalent code for mobile? It doesn’t seem to work other than desktop.

IMG_1275.jpeg
IMG_1275.jpeg1170×1251 78.9 KB

7

Need this code to work on phones too