How do I get rid of the horizontal scroll bar?

blai96
Tourist
7 0 5

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:

blai96_0-1618536141681.png

Mobile:

blai96_1-1618536174333.png

 

 

dmwwebartisan
Shopify Partner
7342 1736 2318

@blai96 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
blai96
Tourist
7 0 5

@dmwwebartisan 

Hi there, please check your messages. Thank you!

dmwwebartisan
Shopify Partner
7342 1736 2318

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
blai96
Tourist
7 0 5

@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!

Inked174406403_166608768572730_1955773886948037176_n_LI.jpg

dmwwebartisan
Shopify Partner
7342 1736 2318

@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.

scrollbar-bottom.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
blai96
Tourist
7 0 5

@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.

white space.jpg

dmwwebartisan
Shopify Partner
7342 1736 2318

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
blai96
Tourist
7 0 5

@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
Shopify Partner
7342 1736 2318

@blai96 

Ok sure, no problem.

If helpful then please Like and Accept Solution.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes