How do I get rid of the horizontal scroll bar?

[blai96]

Hi there, 

I'm currently using the streamline paid theme which is great in many ways. However, one issue is that there's a horizontal scroll bar that appears randomly on the mobile version. This causes there to be a black scroll bar hovering around the bottom area of the screen. 

Is there any way to completely get rid of this horizontal scroll bar? I have no need for this and all it does it create issues for my mobile version of my site.

Desktop:

Mobile:

[dmwwebartisan]

@blai96 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[blai96]

@dmwwebartisan 

Hi there, please check your messages. Thank you!

[dmwwebartisan]

@blai96 

Please add the following code at the bottom of your assets/theme.css file.

#shopify-section-social .overflow-scroller{
overflow-x: hidden !important;
}

Hope this works.

Thanks!

[blai96]

@dmwwebartisan 

Unfortunately, I refreshed the page a few times on mobile and the horizontal scroll bar popped up again. The theme i'm using is Streamline btw!

[dmwwebartisan]

@blai96 

This screenshot is different from the line you have shown below of the footer but on the above screenshot, it is the above the footer. This is the scroll bar that appears on desktop and mobile.

see screenshot below. I have given code to hide this scroll bar.

I am checking on mobile, get back to you.

[blai96]

@dmwwebartisan 

My apologies for the confusion. Thank you for investigating!

Also, as you can see in the mobile version, there is a really big white space at the bottom of the page. The horizontal scroll bar sits right on top of this white space. I'm not sure if this white space is related to the horizontal bar. Just thought I should point this out.

[dmwwebartisan]

@blai96 

No problem. Thanks for the clarification.

Remove my old code if you need that scroll bar.

I checked on mobile and refresh many times but didn't get a line under the footer but you can add the following code to remove the bottom space of the website.

body{
padding-bottom:20px !important;
}

Hope this helps.

Thanks!

[blai96]

@dmwwebartisan 

This code was able to remove the white space perfectly. However, I refreshed the page again and horizontal scroll bar (the black line) appears. I get the same black line in websites that require horizontal scrolling so I know it's the same thing. I may have to contact the Streamline theme supporters at this point...

[dmwwebartisan]

@blai96 

Ok sure, no problem.

If helpful then please Like and Accept Solution.

[boobah]

did you ever figure it out?