Unwanted Horizontal scroll on mobile view!

Store Design

Topic summary

A user encountered an unwanted horizontal scroll bar on mobile view while using the Motion theme.

Proposed Solutions:

  • Initial suggestion: Add body { overflow-x: hidden !important; } to the end of assets/theme.css
  • This approach did not resolve the issue

Working Solution:
A more targeted fix was provided:

  1. Navigate to: Online Store > Themes > Actions > Edit Code
  2. Locate Asset > theme.scss.liquid or theme.css
  3. Add the following code at the bottom:
@media (max-width: 769px) {
  html {
    overflow-x: hidden;
  }
}

Outcome:
The second solution successfully resolved the horizontal scroll issue, with the original poster confirming it worked perfectly.

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

HI,

Hoping you can help me.

On the mobile view, i seem to get a horizontal scroll bar, could you help me remove/resolve this?

I am using the “motion” template.

Thanks!
George

Shop preview link:
https://7z2uai2blzrazhv9-6808141908.shopifypreview.com

IMG_3645.jpg
IMG_3645.jpg1000×2164 152 KB

2

Hi there,
Jack from OpenThinking here!

For a quick fix you could use the following code in your assets/theme.css (paste it at the very end of the file)

body { overflow-x: hidden!important; }

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

3

Hi Jack, it doesnt seem to have resolved the problem. Is there anything else we could try?

4

@georgenova , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 769px){
    html{
        overflow-x: hidden;
    }
}

Please let me know whether it works.

Kind regards,
Diego

1 Like
5

Worked perfectly. Thank you!!!