Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
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!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
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.
I have this problem. How can I figure out what is causing it? I have tried everything I can think of. Thank you
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?
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025