Help! how can i fix the horizontal scrolling on my website

Solved
arminzafari
New Member
1 0 0

Below is the link to my website, if you open the website on your phone, there is a horizontal scrolling to a white section. how can i remove that? Thanks

 

https://www.myhappybump.com/

0 Likes
sarhov
Shopify Expert
482 85 150

Hi @arminzafari

 

sarhov is here...

 

The fastest, but maybe not best solution is the following.

Edit Code, Open theme.scss.liquid file.

Scroll at the very bottom of this file and past the following code there.

body{
  overflow-x: hidden;
}

This can be used as temp solution, but there is need dig deeper and find why and what causes this scroll, one of the elements goes out of its container and there is need to find it.

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

0 Likes
Jasoliya
Shopify Expert
4295 569 1071

This is an accepted solution.

That may stop some slide working that use horizontal scrolling due to body overflow hidden,

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

p#fbExpanderMoreButtonSection { width: auto !important;}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
sarhov
Shopify Expert
482 85 150

@Jasoliya 

That can't cause any slide issue, sliders use their own wrappers for overflow hidden.

And that it is not perfect, I have written this myself...

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

0 Likes
ShawnEni
New Member
1 0 1

Hi, I had the same problem. 

I used this solution which actually worked for desktop, but NOT on mobile. 

 

body{  overflow-x: hidden;
}

This solution had no effect. 

p#fbExpanderMoreButtonSection { width: auto !important;}

Any ideas how to fix it for mobile?

yuu
Excursionist
18 1 15

Hi,

#content-holder{overflow-x:hidden;}

This code worked on my theme. 

0 Likes

None of the top solution had effect on my site.

This worked for me on desktop and mobile:

html{ overflow-x: hidden;}

 

 

0 Likes