How to prevent horizontal scroll on Mobile?
- If you’re adding value on the Desktop, just make sure you reset the value to “0” on Tablet and mobile responsive devices or adjust the value on Tablet and Mobile.- Desktop: 20px padding on all sides is set up.
–Tablet: Desktop value(padding) is inherit to tablet devices.
– Mobile: Desktop value will be inherited by Mobile devices.
- Use relative value (“%” or “em” or “rem”) over (px) pixel value. Great for accessibility and readability. (watch the video below)
–Tablet: Desktop value(padding) is inherit to tablet devices.
– Mobile: Desktop value will be inherited by Mobile devices.
Stories
Recently, I had a problem with my popular blog post – Elementor Sticky Header article.The issue was caused by Commento.io ( script) which leads to horizontal scroll on mobile devices. It took about an hour to figure out what the real issue was and fix it.From that incident onwards, I thought I would never let that happen to any one of you reading my article because I don’t want you to go through those processes again.Causes of Horizontal Scroll on Mobile
- Elementor’s Custom positioning: Elementor’s Custom Positioning is an amazing feature built-in that enables us to move the elements around the pages without writing any single line of CSS code but if you apply the style on the Desktop and don’t reset the value on the tablet or mobile devices this can cause a horizontal scrolling issue. So, You need to watch out.
- Sometimes embedded code, injected JS can cause Horizontal Scrolling issues on mobile devices, for example, Google Adsense code (fixed one), in my example, it is commento script for comment.
What people will suggest?
Use
Overflow-x: hidden: This is the most one of the most commonly suggested answers and sometimes it fixes most of the issues.Before: the scrollbar is visible before applying the overflow hidden CSS property.
After: After applying the overflow hidden to the body tag now scrollbar is not visible and you cannot scroll at all.If some valuable items are present, you will miss it
Enabled Section/ Container’s Overflow settings
Some people will suggest using the Section/ Container – Overflow settings, this is an in-built that is good for some specific situations.
Process of debugging
Step#1: Open Chrome Developer (Dev) Tools
This is the first step, we need to figure out why we have a horizontal scroll on Mobile devices.To do so, open Chrome Dev tools by right-clicking on any elements and clicking the inspect elements to inspect the page.
Step#2: Toggle the device toolbar
While you’re on Developer mode, Now, toggle the Device toolbar (see video) and set it to Responsive mode so we can drag around the window and see what elements cause the issue.
Watch the video below ⇓Step#3: Troubleshooting with CSS: The console.log() of CSS
Watch the video properly.
Here is the CSS you need to add to the Custom CSS area ( It is only available to the Elementor pro version) or you can also use your theme customizer – custom CSS area too.
*{
outline: 1px solid red;
}
This will look like this when you apply the CSS.
* in CSS means – All elements ( Universal Selector ).
When you apply the CSS, it will select everything on the page and give an outline in red. It doesn’t matter where you add it.
Most likely it will be under the Advanced tab – Custom CSS area.
If you don’t have the Pro version you need to go to theme customizer i.e. Appearance – Customize – Additional CSS.
(Alternative Method) Use JavaScript to debug
CSS is not only the way to debug and fix the issue.
My friend at ElementHow shows you how to implement with JS and also you can create a bookmark.
Now choose whichever method you prefer and let me know in the comment below.
If my article helps you find your issue, please let me know in the comment section below I would love to hear from you.
Please share this post with your friends this might save huge time for them. Because Sharing is caring
If you found this tutorial helpful and want to support me here are my links-
Best wishes
