Easily Remove Elementor Horizontal Scroll on Mobile
Quickly find out exactly what is causing the 'swimming'!
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
Simply scroll down the page to see what elements go overboard!
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.
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.
One Response