Why is my static page scrolling horizontally on mobile devices?

Kavoglio
Tourist
3 0 1

I am currently working on a static page within my store using the Dawn Theme and I noticed that my page is able to scroll right horizontally on mobile devices which is causing some of the content on the right to be hidden behind that scroll. It is happening only on this one page and I can't seem to find what the issue is. 

Replies 4 (4)

PageFly-Richard
Shopify Partner
4287 973 1626

 

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

Regards your problems with the error “Page Overflowing Horizontally”. When the page show scrollbar horizontally that means there are some elements inside the page that got overflow the width limit of their parent. So we have to use CSS code to prevent that.
Here is the code to fix on all pages:
<style>
html,body {
overflow-x:hidden !important;
}
</style>

You can use this code and paste this above </head> tag in the theme.liquid file.
If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

HeyNorris
Shopify Partner
1 0 0

This is a terrible solution. The proper solution is to find the element(s) causing the horizontal overflow and hide the overflow on the immediate parent container. Or, if the element can be contained within the viewport, adjust its size accordingly.

 

If you set overflow:hidden on html or body, you'll run into all kinds of unexpected problems. For example, if you're using a sticky header it will just stop working. 

 

Sledgehammer fixes are rarely a good idea.

RainbowGlitter
Shopify Partner
18 1 3

I have this problem. How can I figure out what is causing it? I have tried everything I can think of. Thank you

If I was able to help you please Like it and Mark it as Solution!

ingrid8
Tourist
7 0 1

I bought a theme from Themeco, the cornerstone barista theme and I have serious problems with sticky header. It sounds similar to yours. They said there is no fix for this bug atm, but I cant launch my page with such a crippling bug on my ecommerce sight. The sticky header is on top of elements such as the search filter and popup forms. Meaning, my customers cant search for products or nothing, because the top of the search filter where the back button is, is hidden, so in order to get out of the search area, they have to use the phones back button, causing them to end back on the home page.

 

I've tried to unstuck the header too, but it wont unstuck. Anyone found any fixes or workarounds?