How can I remove horizontal scroll bar in mobile view?

Store Design
,

Topic summary

A user encountered a horizontal scroll bar appearing on their Shopify store’s mobile view (www.wearefettle.com), which negatively impacted the scrolling experience. The desktop version displayed correctly.

Solution provided:

  • Navigate to Shopify Admin → Online Store → Theme → Edit code
  • Locate the CSS file (base.css, theme.css, styles.css, or theme.scss.liquid)
  • Add the following CSS code at the bottom:
main#mainContent {
  overflow-x: hidden !important;
}

Outcome: The solution successfully resolved the horizontal scroll issue. The problem was closed as solved.

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

The site displays perfectly on desktop, but when I load the mobile site there seems to be an overflow/horizontal scroll, which can completely ruin the scrolling experience.

Is there any easy way to stop this from happening?

Site: www.wearefettle.com

Thanks!

Ben

2

Hi @Fettle ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_0-1716552348082.png
BSSTechVenture_0-1716552348082.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716552353173.png
BSSTechVenture_1-1716552353173.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

main#MainContent {
    overflow-x: hidden !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Thanks so much for the quick response. That worked perfectly!

1 Like
4

Hi @Fettle ,
We’re happy to see that our suggestion helped you solve the issue. Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance. :heart_eyes: :heart_eyes: