Horizontal scrolling can disrupt the user experience by making navigating your website difficult. Ensuring that your site does not scroll horizontally to the right is essential for maintaining a clean and user-friendly interface.
This article will guide you through the steps to identify and fix issues that cause unwanted horizontal scrolling.
This type of issue is usually visible mostly on mobile devices—phones and tablets. Where the horizontal overflow exists, visitors can scroll to the right, showing a space.
Common issues for the page horizontal scrolling
Most of the common issue that allows a page to have horizontal scrolling is caused by the following factors:
Elements (Section/Row/module) have a width set bigger than 100%
Elements (Section/Row/module) have negative right margin set
Elements (Section/Row/module) have Transform options set
Check elements for incorrect settings
As mentioned above, a page will scroll horizontally if different settings are not set correctly on any of the elements inside your page layout. For each element in your page layout, check the following:
Open the Element's (section, row, module) settings
Go to the Desing Tab → Sizing and ensure that the Width and/or Max Width are not set to values higher than 100%
Go to the Design Tab → Maring and ensure that the Margin Left/Right is not set with negative values such as -200px
Go to the Design Tab → Transform and ensure that the Translate option doesn't force the element to exceed the viewport
Pro tip: Any elements in a page layout should never have their Width or Max Width options set to values higher than 100%.
Prevent horizontal scrolling
In any HTML page, we can prevent such an issue by setting the overflow property to hidden on the parent element.
Edit each section on the page
Go to Advanced Tab → Visibility
Set the Horizontal Overflow to Hidden.
Note: This is considered to be just a bandaid to the issue. We highly recommend checking each element in the page layout and ensuring that the above settings are always set without the correct limits.
Identify which layout elements are creating the horizontal page scrolling (for advanced users)
To quickly identify which layout element(s) are creating the horizontal page scrolling, we can use the browser's DevTool, available in all modern browsers.
Load the page in your favorite browser
Right-click anywhere on the page
Choose Inspect from the contextual menu
Switch to Tablet/Phone responsive view
Create a new CSS rule in the DevTool inspector
Use this CSS code:
body * {
outline: 1px solid red;
}
The above CSS rule will add an outline border of 1px red color around each layout element, giving you a clear indication of which element is creating the horizontal scrolling.
An example can be seen in the GIF below:
