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?
Horizontal scroll is usually caused by elements extending beyond the viewport width. Here are two simple ways to avoid it:
- Adjust Responsive Spacing Values: Padding, margins, and widths set for desktop can overflow on smaller screens if not updated for tablet and mobile.Examples:
– Desktop: 20px padding applied on all sides.
–Tablet: Inherits the desktop spacing unless adjusted
-Mobile: Also inherits the desktop spacing unless overridden
- Use Fluid, Relative Units:
Replace fixed pixel values (px) with scalable units like:%(percentage of container width)em/rem(based on font size)
These units improve accessibility and help content scale properly across different device sizes.
Story: How I Discovered the Problem
Not long ago, I ran into an unexpected issue on one of my most popular articles — the Elementor Sticky Header post. Everything looked great on desktop, but on mobile devices, the page had an annoying horizontal scroll. After nearly an hour of digging, I finally discovered the culprit: a script from Commento.io was pushing the layout wider than the screen. A tiny issue… that caused a big headache.
That experience made me realize how easily this can happen — and I don’t want you to waste time troubleshooting the same thing. So here’s what I learned.
Common Causes of Horizontal Scrolling on Mobile
- Elementor Custom Positioning Misuse: Custom Positioning is an incredibly powerful feature — you can move elements visually without writing CSS. But here’s the catch: If you position something on a desktop and forget to adjust or reset the values for tablet and mobile, the element may extend beyond the viewport width… causing horizontal scroll.
–> Always check responsive settings!
- Third-Party Scripts and Embeds: Injected JavaScript or embedded content — such as Google AdSense, comment plugins (like Commento.io in my case), or iframes — can include fixed-width elements that overflow on mobile.
–>Test embeds on multiple devices and applies CSS constraints when necessary. - Incorrect or Outdated Critical CSS: Poorly generated critical CSS can cause layout flashes (FOUC) and temporary width shifts that push the page wider than intended.
–> Ensure your optimization tools are up-to-date and configured correctly.
What will people suggest?
Using overflow-x: hidden on the Body Tag
One of the most common recommendations is to apply:
body {
overflow-x: hidden;
}
Yes — this can fix horizontal scrolling in some cases.
However… It’s more of a band-aid than a real solution.
What actually happens:
- Before: The horizontal scrollbar appears — indicating something is breaking the layout.
- After: The scrollbar disappears — but now the element causing the issue still exists… You simply can’t scroll to it.
That means valuable content may be inaccessible without you realizing it.
–> Use this only when you’re 100% sure nothing important overflows.
Enabling Overflow Settings on Sections / Containers
Another suggestion is to change the Overflow setting inside Elementor for a specific container or section.
This can help in some targeted situations, but be careful where you apply it — especially on the header.
If you set the header’s overflow to hidden:
You may run into:
- Sub-menus are getting cut off or hidden behind the header
— even if you increase z-index
- Dropdown menus are not expanding properly
Only use this setting when you know exactly what element is causing the overflow.
How to Properly Debug the Issue?
Step 1: Open Chrome Developer Tools
To identify the exact cause of horizontal scrolling, start by inspecting the page:
- Right-click anywhere on the site
- Select Inspect
- Chrome DevTools will open
This allows you to explore elements visually and detect layout issues.
Step 2: Toggle the device toolbar
Next, switch to Responsive Mode:
In DevTools, click the Toggle Device Toolbar icon (mobile/tablet view)
Adjust widths by dragging the viewport
Watch for when the horizontal scroll appears — that’s your first clue
This helps pinpoint the element that breaks out of the mobile viewport.
Watch the video below to follow along step-by-step.
Step 3: Troubleshooting with CSS: The console.log() of CSS
Watch the video properly.
Where to Add the CSS
You can apply the CSS in one of the following places:
Elementor Pro Custom CSS panel (available only in the Advanced plan and higher)
Your Theme Customizer → Additional CSS
A child theme stylesheet (recommended for developers)
Choose whichever method you prefer — the CSS will work the same.
*{
outline: 1px solid red;
}
This will look like this when you apply the CSS.
What the * Selector Means in CSS
The * symbol is called the Universal Selector — it targets every element on the page.
So when you apply the debugging CSS below, it will outline all elements in red, making it easier to spot which one is causing the horizontal overflow.
You can add this CSS in any of these locations:
- Elementor Pro → select any element → Advanced tab → Custom CSS (this is the best method).
- Theme Customizer → Appearance → Customize → Additional CSS
- Or a child theme stylesheet, if you prefer working with files
Don’t worry — the location doesn’t affect how the CSS works.
Important Reminder:
Once you find the problematic element, remove the CSS — the red outlines can be very distracting if left on.
(See the screenshot and video below for guidance.)
Alternative Debugging Method: Using JavaScript
CSS isn’t the only way to identify overflow issues.
You can also use JavaScript to detect which elements are breaking the layout.
My friend over at ElementHow demonstrates a helpful JS method — and even shows how to turn it into a browser bookmarklet for quick debugging anytime.
So feel free to choose the approach that works best for you — CSS or JavaScript — whichever helps you pinpoint the issue faster.
I’d Love to Hear From You!
Did this guide help you fix your horizontal scroll issue?
If so, let me know in the comments — your feedback encourages me to keep improving and creating more tutorials like this.
And if you know someone who might run into the same problem, please share this article with them. You might save them hours of frustration.
Because yes… sharing is caring.
If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
- Buymecoffee
- PayPal or
- Buy products from my store
Thank you.
