How to adjust spacing on the Collections page so the desktop and mobile site matches?

Topic summary

A user seeks to adjust spacing between the “x-x of x results” text and product photos on their collection page, specifically on mobile to match desktop spacing. They are using the Atom theme on Shopify.

Issue:

  • Desktop spacing is correct
  • Mobile spacing differs and needs adjustment to maintain consistency

Resolution:

  • Initial CSS code suggestion didn’t work when added to custom CSS section
  • User identified the correct class name was “collection-sorting-number” (not the originally suggested one)
  • After updating the class name in the CSS code, the spacing issue was successfully resolved

The discussion reached a successful resolution through CSS customization.

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

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. Is there any way I can do this? Theme: Atom Shop URL: chalkdot.co Thanks in advance!

1 Like

Hi there! Where should I put this code? Sorry, I am completely new at this!

Hi, thank you so much! I’ve tried adding the code to the custom CSS section but it does not seem to be changing anything. Is there something I am doing wrong?

Hi! I tried your suggestion and checked the class name. All I had to do was change it to “collection-sorting-number” and it worked. Thank you so so much!

1 Like