How to’s Troubleshoot & Prevent Horizontal Scroll effects on Mobile with 2 easy methods Fast

  • kishorchand
  • Elementor Page Builder, Freebie
  • November 13, 2019
  • Join the Conversation
  • Modified 9:49 am

In this tutorials, we are going to discuss how to troubleshoot and prevent Horizontal Scroll on Mobile just by using CSS and JS with easy 4 steps really fast

horizontal scroll on mobile
After you have finished creating a website and you didn’t realize you have horizontal scrolling on mobile devices.

How to Prevent Horizontal Scroll on Mobile?

That I didn’t mention did I ? Nope not really

  • If you’re editing something on Desktop make sure you reset to “0” on Tablet and mobile or add value on Tablet and Mobile responsive mode.
  • Sometimes it is best to use “%” or “em” or “rem” instead of (px) pixel value.

Why I write these tutorials?

Recently I had a problem with all my popular blog post – sticky header with elementor was due to comment ( script) and cause me a headache and took me around 1 to 2 hours to fix the issue.

From that incident happen to me, I will never let happen to you, going through all the pain that might cause it.

How it causes the problem? (Culprits)

  • Elementor’s Custom positioning: If you use lots of Elementor’s custom positioning feature to place your content all around for design purpose on Desktop. Make sure you reset it to zero (0) on Mobile and tablet.
  • Images do not have max-width.

Various ways to solve them elegantly using Elementor.

  1. Responsive Design Begins and Ends With Correct Planning.
  2. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.
  3. Positioning Elements for Mobile Responsive View
  4. When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in per cent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.
  5. Responsive Design: A Horizontal Approach
  6. Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.


Open Developer (Dev) Tools

This is the first step we need to do in order to figure it out why we have a horizontal scroll in Mobile devices. To do that open Developer tools

People will tell you to add overflow-x: hidden to the body to fix the problem sometimes it fixes the problem but what about the important stuff hidden that nobody mention.

If you only have one then it is easy to fix but if you have multiple then it is difficult to do. 

Follow the step –

  1. Right-click on any element on the page and select Inspect to jump into the Elements panel.
  2. Press Command+Option+C ( On Mac) or Control+Shift+C (Windows, Linux, Chrome OS)


Toggle device mode to responsive

While on Developer mode toggle the Device toolbar (see video) and set it to Responsive mode so we can drag around the window and see what elements causes the issue.


Troubleshooting with Outlines

Here the CSS solution you need to add to the Custom CSS area ( Only available to Elementor pro version) or you can use Theme Customizer – custom CSS area too if you don’t have Pro version yet but better get it because you’re losing so many good features from Pro version.

 	outline:1px solid red;

*  in CSS means – All elements ( Universal Selector ). Selecting everything on the page and give an outline of red. It doesn’t matter where you add it. Most like it will be under Advanced – Custom CSS. If you don’t have Pro version you need to go to theme customizer i.e. Appearance – Customize – Additional CSS. After you add this CSS it will outline every element and make it easy to figure it out which elements cause the issue. Remember remove outline when you’re done.


Helping other problems & give feedback:

Since we don’t have any access to their website, we can find the errors and give feedback.

Same page – Open Developer tools – Click any DOM to see every element – scroll down and find pseudo:: after element then paste the CSS provided above.

Can we do it with JavaScript? Yes, you can do it with JavaScript too without going to Elementor’s Editor and I got it from < Elementor Codes>. You will get full tutorials on how to implement the code. Choose whichever method you prefer and let me know in the comment below.
(function (debug) {
var w = debug.documentElement.offsetWidth,
t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0) {‘outline’, ‘1px solid red’, ‘important’);

If my Blog post really help you finding your issue, please let me know on the comment section below i would love to hear it from you.


if you can please share it to your friends this might save huge time for them. Because Sharing is caring


Best wishes