How to add a spacing between product cards in Collection page Dawn Theme

Shopify Discussion

Topic summary

A user needed to add spacing between product cards on their collection page in Shopify’s Dawn theme, specifically for desktop view only without affecting mobile layout.

Initial Solution Provided:

  • Add CSS code to base.css file
  • Code: li.grid__item.scroll-trigger.animate--slide-in { margin: 0 6px !important; }
  • This affected both desktop and mobile views

Final Solution:

  • Wrap the CSS in a media query to target desktop only
  • Code snippet:
@media (min-width: 990px) {
  li.grid__item.scroll-trigger.animate--slide-in {
    margin: 0 6px !important;
  }
}
  • Add to end of base.css file in theme code editor

Status: Resolved - the media query solution successfully added desktop-only spacing while preserving mobile layout.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,
I have a problem with the product cards inside my collection page. How Can I adjust the spacing in the desktop view without altering the spacing in my mobile view. See photo for reference.
Store Preview Link: https://bgtz765ufz7gbbgl-13830324282.shopifypreview.com

IntechCarl_0-1740541466800.png
IntechCarl_0-1740541466800.png1198×722 239 KB

2

Hi @IntechCarl

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

li.grid__item.scroll-trigger.animate--slide-in {
    margin: 0 6px !important;
}

Result

LizHoang_0-1740543559552.png
LizHoang_0-1740543559552.png1074×623 212 KB

Best,

Liz

1 Like
3

Hi @LizHoang Does it only affect the desktop view? Because I only want the desktop view to have the spacing.

4

Hi @IntechCarl

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (min-width: 990px) {
li.grid__item.scroll-trigger.animate--slide-in {
    margin: 0 6px !important;
}
}
1 Like
5

Thank you @LizHoang This one works!