How can I remove an unwanted scroll bar from my website?

Shopify Discussion

Topic summary

A Shopify store owner encountered an unwanted vertical scroll bar appearing on the left side of product pages that disappeared when scrolling to the bottom.

Solution for Desktop:

  • Applied CSS code: #MainContent { overflow-x: visible !important; }
  • This successfully removed the vertical scroll bar on desktop

Follow-up Issue:

  • After fixing the desktop issue, a horizontal scroll bar appeared on mobile product pages

Mobile Fix:

  • Modified the CSS to: #MainContent { overflow-x: hidden !important; overflow-y: hidden !important; }
  • This resolved both the vertical and horizontal scroll bar issues

Key Recommendation:

  • Check for overflow: hidden or overflow: auto styles on elements that shouldn’t have them

The discussion appears resolved with the final CSS solution working for both desktop and mobile views.

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

Hello all,
I have an Unwanted scroll bar on the left in my website.
It appear when you open the product pages, when you scroll to the bottom of the page it disappear
Im trying to get rid of it without any luck.
Can you help me?
thanks

Website Link

1 Like
2

Check for overflow: hidden or overflow: auto styles on elements that shouldn’t have them.

3

To remove the unwanted scroll bar on the left write this custom css

#MainContent {

overflow-x: visible !important;

}

1 Like
4

Thank you, worked like a charm :slightly_smiling_face:

1 Like
5

You are welcome

1 Like
6

Hello again,

now that i have changed the vertical scroll on desktop, i have got an horizontal scroll on product pages on Mobile.
thank you

7

Hi, i just stumbled across your conversation and i exactly faced the same issue! To also get rid of the horizontal scroll bar alter the initial solution to the following:

#MainContent {

overflow-x: hidden !important;
overflow-y: hidden !important;

}
This solved the issue for me. Hope it helps you!
BR,
Mat

1 Like