Have you ever spotted those pesky horizontal scrollbars on your website, especially when viewed on a mobile device? It’s kind of annoying, right? Your screen ends up moving sideways when you’re just trying to scroll, and that’s definitely not ideal for a good user experience. It can make your website appear less polished and might confuse visitors. Interestingly, this problem is quite common among Divi websites, and surprisingly, many people don’t even notice it.
But don’t worry, this issue isn’t solely tied to Divi—it can happen with various themes! More often than not, it’s a result of something in the user settings, although sometimes it’s not. The good news is there are multiple solutions available to tackle this problem head-on.
Divi Horizontal Scroll Issue
The problem we’re talking about can manifest in a couple of different ways. Sometimes, users spot a sneaky horizontal scrollbar popping up at the bottom of the screen. This scrollbar is added by the browser when some content extends beyond the screen’s width.
On the other hand, there are cases where users don’t see any scrollbar, but they notice the site moving sideways as they scroll. This is particularly common on mobile devices when swiping with your finger causes the content to slide left and right on the screen.
This issue occurs because something is causing the page container to be larger than the browser window. Typically, it happens when an element becomes wider than its container, hanging off the edge of the page. Consequently, there’s a chance that your website’s content might get cut off or hidden.
No matter which type of issue you encounter, it simply shouldn’t be happening! It doesn’t look good, confuses users, and gives the impression that the site is malfunctioning and unprofessional.
Common Issues for the Page Horizontal Scrolling
While there are a number of issues that could cause the horizontal scroll issue, I have found the two main culprits to be;
- Elements (Section/Row/module) have a
widthset bigger than 100% - Elements (Section/Row/module) have negative right margin set
Horizontal Scroll Issue in Divi Solved
I should preface this with there may be many ways to solve the issue but I will only focus on one for today.
When you are looking at the element settings, go to the Advanced Tab -> Visibility and set the Horizontal Overflow to Hidden.
Do Note: if the overflow still exists are setting it to hidden, it could mean at least one section has it’s width set to a value higher than 100% or the Margin Right has a negative value.
Identify Which Element is Causing the Horizontal Page Scrolling Issue
A way to help identify which element is causing the issue, is to set a border around each element so that you can get a visual.
- Open the website in your chosen browser
- Right-Click anywhere on the page
- Choose Inspect from the menu
- Switch to Tablet/Phone view
- Create a new CSS rule
body * {
outline: 1px solid red;
}This will add the red border of 1px around each layout element and will help you identify which one is causing the horizontal page scroll issue.
Hopefully this will help you get sorted!
