How to adjust spacing on the Collection page so that the desktop and mobile site match?

Store Design
, ,

Topic summary

A user is experiencing inconsistent spacing between the “x-x of x results” text and product photos on their Collection page. The desktop version displays correctly, but the mobile site has different spacing that doesn’t match the rest of the page.

The user previously received a solution but lost it when the comment disappeared. They’re now seeking help to recreate the fix.

Current Status:

  • User is comfortable implementing code but needs assistance writing the custom CSS
  • Theme: Atom
  • Shop: chalkdot.co
  • The thread appears to be awaiting a response with specific CSS code to resolve the mobile spacing issue
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi! I am trying to increase the spacing between the “x-x of x results” and the product photos on the Collection page. On the desktop site, it is perfectly fine but the spacing is different on the mobile site. I just want to increase the spacing between these on the mobile site so it matches the spacing on the rest of the page if that makes sense. Someone found a solution for this yesterday, however I forgot to save the changes and their comment has since disappeared from the original post. Any help will be appreciated. Thanks!

Theme: Atom Shop URL: chalkdot.co

2

Hi there! I am comfortable with adding the code to the site, however I am unfamiliar with how to write it. Would it be possible for you to provide the custom CSS code?

3

Sure, how do I go about doing that?