Dawn 12 | Space on collection products grid

Store Design
, , , ,

Topic summary

A user seeks to add spacing between products on mobile devices only for their Shopify store (ellsoll.com).

Proposed Solution:

  • Another user provides CSS code to be inserted in the theme.liquid file before the </head> tag
  • The code uses a media query targeting screens up to 767px width
  • Targets specific grid items with padding adjustments

Current Status:

  • The original poster reports the suggested CSS solution is not working
  • The issue remains unresolved and requires further troubleshooting

Note: Some code snippets in the conversation appear corrupted or reversed, which may have contributed to the implementation failure.

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

Hi,

Is there any way to add some space between the products on Mobile only?

תמונה של WhatsApp‏ 2024-09-11 בשעה 09.59.37_634f1a16.jpg
תמונה של WhatsApp‏ 2024-09-11 בשעה 09.59.37_634f1a16.jpg1079×1033 76.6 KB

2

Hi @Ell_Soll ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
@media only screen and (max-width: 767px) {
    .shopify-section-sections--16454147342497 li.grid__item.scroll-trigger.animate--slide-in {
        padding: 0px 12px 15px 0px;
    }
}

topnewyork_0-1726066402123.png
topnewyork_0-1726066402123.png312×554 133 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

3

Thanks but it’s not working.