Easily debug horizontal scrolling on mobile

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

Simply go on the page that has this problem, click CTRL-SHIFT-J or CMD-SHIFT-J (on Chrome) and paste the code below then click enter.

(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) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');

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));

Enable mobile view

Easily debug horizontal scrolling on mobile 1

Then scroll down the page to see what elements go overboard!​

Easily debug horizontal scrolling on mobile 2

To fix the issue, check the settings of the culprit element. Frequently, this 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 debug horizontal scrolling on mobile 3

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

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *