Quick fix for mobile spacing in Shopify Featured Collections

Technical Q&A
, , , ,
1

Hi everyone,

I have noticed many Shopify merchants struggle with spacing around their Featured Collections on mobile. I have helped a number of stores fix this quickly without affecting desktop layouts, and here’s a simple way to do it:

Steps:

  1. Identify the Featured Collection section wrapper (usually a class like .page-width or .section-padding).

  2. Add a mobile-specific CSS override to adjust left/right padding. For example:

Screenshot_20260120-225009_ChatGPT
Screenshot_20260120-225009_ChatGPT965×373 38.3 KB

3. Save and preview your changes on mobile to ensure it looks good.

Tips:
Test changes on multiple devices if possible.

If your theme is different (not Origin), the class names might change. Inspect your section in your browser to find the correct selector.

I’m happy to help anyone who wants guidance on customizing spacing or layout for mobile. Feel free to ask here or we can continue the conversation where it’s easier to share code snippets.

2 Likes
2

Hi @julie_111

Thank you for sharing that fix. I also saw that many merchants have issues with that. But I think you missed saying where to copy that code?

And in this forum, it is easy to share code, not sure why you have issues. Do you see </> icon in the rich text or markdown editor?

1 Like
3
  1. Use the “Pre-formatted” text option when you want to make it easy for merchants to copy your code.
  2. Use screenshots for visual help to identify certain places on screen where you want to direct the merchant. Use arrows, circles, rectangles to highlight.
  3. Stop copy/pasting search results and chatgpt. If you don’t know, you don’t know. No harm in that.
  4. If you wnnt to help but don’t know the answer, do the work and provide manually typed answers. These a.i. comments are what’s getting you hidden. Be real. Be authentic.
  5. There is absolutely no need to take conversations off forum for simple tasks. Anything you have to say should be said in public. That’s why it’s a public forum.
  6. Read the Community Guidelines. No spam, no a.i. content. Using multiple accounts to like your own posts is also there. Take note of the new a.i. flag.
1 Like
5

Hey @Augustine_digital

First, Dawn is the base for Origin, so it is the same theme. And there is no base.css or theme.css, it is just one base.css for the Dawn theme. Check the demo or GitHub.

But if you do copy to base.css, it will not apply on whole Featured Collection section, just the title. Products are in a slider and wrapped in an element that is targeted in component-slider.css, which overrides the code you propose. Try it out in your theme and you will see.

And I see you did find </> icon for code, but that is not quite there yet. You have to wrap the whole code. So maybe first click </> icon and instead type or paste code here paste your code.

And read @Maximus3 post again.

7

No problem, but have to ask.

Have you actually tried the steps and code before posting?