All Collections
FAQ's and Troubleshooting
How to prevent horizontal page scrolling to the right
How to prevent horizontal page scrolling to the right

Prevent page layout from overflowing, creating horizontal scroll to the right

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Usually, this type of issue can be visible mostly on mobile devices - phones and tablets.

When 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

Prevent horizontal scrolling

In any HTML page, we can prevent such an issue by setting the overflow property to hidden on the parent element.

  1. Edit each section on the page

  2. Go to Advanced Tab β†’ Visibility

  3. Set the Horizontal Overflow to Hidden.

Note: if the overflow still exists, it could mean that at least one section has its Width set to a value higher than 100% or the Margin Right option has a negative value.

  • Check the Design Tab > Sizing - for the Width option

  • Check the Design Tab > Spacing for the Maring Right option

Pro tip: any elements in a page layout should never have their Width or Max Width options set to values higher than 100%.

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.

  1. Load the page in your favorite browser

  2. Right-click anywhere on the page

  3. Choose Inspect from the contextual menu

  4. Switch to Tablet/Phone responsive view

  5. Create a new CSS rule in the DevTool inspector

  6. 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.


Did this answer your question?