Responsive mobile horizontal scroll issue

Sometimes when you see your pages on the mobile, the page ended up with an undesired extra space to the right. (It slides from the left to the right). In this article, you will learn how to avoid this issue.

Why does this issue happen?Click to copy

Basically, the main reason for this issue happening is that the content of the page has a bigger width than the device’s width.

For example, the mobile device’s width is 375px, but there is an element having more than 375px, so you have to scroll horizontally to see the full element.

In some cases, if you set the negative margin-left and right for an element, it can cause this issue.

How to fix this issue?

Step 1: Open the Custom Code Editor

Navigate to the bottom left corner, hover over it to see feature Add custom Code popping up, and make a left-click.

Step 2: Paste the Custom CSS code

And then, go to this link to get the code and paste it into the Custom CSS box like the image below

Click on the Save change button and publish the page to see the result.

Note: If the above code does not work, you can change it into this code . Please notice this CSS when the page has a sticky section or sticky header on mobile. This code will disable sticky sections.

If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!


Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!