Easily Remove Elementor Horizontal Scroll on Mobile

Quickly find out exactly what is causing the 'swimming'!

Easily Remove Elementor Horizontal Scroll on Mobile Devices
Play Video

First, simply go on the page that has this problem

Navigate to the page with the Elementor horizontal scroll problem. View it from the front-end.

Then, press CTRL-SHIFT-J or CMD-SHIFT-J (on Chrome) and paste the code below. 

Then press enter.

(function (debug) {
    var w = debug.documentElement.offsetWidth,
        t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));

You can also bookmark the below code directly, then just click on the link

javascript:(function(debug){var w=debug.documentElement.offsetWidth,t=debug.createTreeWalker(debug.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));

Now, enable mobile view

Easily Remove Elementor Horizontal Scroll on Mobile Devices

Simply scroll down the page to see what elements go overboard!

Easily Remove Elementor Horizontal Scroll on Mobile Devices

Finally, to fix the issue, check the settings of the culprit element.

Check from within Elementor, after you identified the problems elements. Frequently, this Elementor horizontal scroll mobile is caused by absolute positioning. Try negative margins instead.

Otherwise, simply setting the section(s) that contain the culprit elements to overflow:hidden will often work.

Easily Remove Elementor Horizontal Scroll on Mobile Devices

Et voila! See the video for a great example!

If for some reason you still have problems after the above video and instructions, watch this advanced tutorial video

You can also try this link, directly in the Elementor documentation.

Easily Remove Elementor Horizontal Scroll on Mobile Devices
Play Video
< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >
Change CSS of Elements by Using the Inspect Tool
Learn

Change CSS of Elements by Using the Inspect Tool

One of the most frequent request by people using Elementor is how to change the look of certain specific elements. And the most frequent answer is CSS.

The problem is that most people don't know how to properly use the Inspect function to target the right element, and modify the CSS. Here is how.

Read More »

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Comments are closed.