Excess: concealed

From time to time, elements on a page may be situated beyond the viewport, resulting in an unintended outcome of horizontal or lateral scrolling that reveals additional empty space around your layout. Not all horizontal scrolling is undesirable, but if it conflicts with your design, we will guide you on how to prevent it using Excess: concealed, adaptive design, and intentional interaction setup. 

Within this tutorial, you will understand the following:

1. Reasons for excess occurrences
2. Methods to identify excess
3. Strategies to resolve excess problems

Reasons for excess occurrences

Numerous factors can lead to unwelcome horizontal scrolling in your design, but typically it arises due to one of two reasons: 

• The design layout includes an element that is dimensioned or located in a manner that shifts it off the screen and beyond the viewport.
• Activities or animations that commence off-screen. For instance, if you have a Heading entering from the side, its initial location off the screen when the page loads may cause overflow, despite the Heading ultimately reaching the correct position after the animation completes. 

Excessive horizontal scrolling may arise from a different scenario than the two mentioned above, but layout and animation-related overflow usually manifest the most.

Methods to identify excess

Horizontal scrolling is not constantly negative. Nevertheless, when checking for excessive horizontal scrolling, watch out for anything that gives the impression that your layout’s boundary (typically the right side of your design) is not working as intended. In simpler terms, seek out additional space or elements extending past the edge of your layout’s boundary during scrolling. You can assess this in the Designer and the published site. 

In the Designer, to identify potential unwanted horizontal scrolling:

1. Access the Designer
2. Scroll left and right to observe any elements overflowing outside the viewport 
3. Resize the Designer canvas
4. Adjust the canvas size to assess responsiveness and fluidity

Note: If you are using a trackpad or a mobile device, scroll left and right — but with a mouse wheel, holding down Shift typically enables left and right scrolling.

Learn more about creating responsive designs.

To identify unwanted excess on your published site (especially with interactions active):

1. Publish your site
2. Check if your interactions cause surplus space to the right of your layout (especially on mobile devices)

Excess whitespace commonly arises with interactions as the browser continues to think the interaction requires the additional width that was utilized at the start of the animation even after the interaction finishes. 

Strategies to resolve excess problems

You can prevent horizontal scrolling through various methods:

1. Utilize Excess: concealed
2. Evaluate your layout and its responsiveness
3. Be mindful of your interaction setup
4. Explore alternate solutions
5. Apply Excess: concealed to the entire page

Utilize Excess: concealed

Establish the parent element’s Overflow as hidden: 

1. Identify the element causing the undesired horizontal scrolling (e.g., an Image element)
2. Select its parent element (e.g., a Section)
3. Access Style panel > Size 
4. Set Overflow to hidden
5. Scroll left and right to verify if the excess horizontal scrolling has been removed

By setting Overflow to hidden, you conceal elements extending beyond the parent element boundaries.

Please note: Position: sticky won’t function when parent elements have Overflow: hidden.

Be mindful of your layout responsiveness

Responsive design is crucial in layout creation. Although a design may be perfectly sized for one display, it could lead to content overflow on different viewport sizes.

To ensure responsiveness:

1. Click the preview icon in the Designer (e.g., click the “eye” icon) 
2. Resize the Designer canvas
3. Adjust the canvas width to test different viewport sizes
4. Return to the desktop breakpoint using the desktop icon

You can also simulate larger displays:

1. Access Canvas settings from the Designer
2. Input the display width you wish to preview
3. Exit the large display preview using the breakpoint buttons

Learn more about creating responsive designs.

Consider your interaction setup

Imagine you’ve applied an interaction to a Heading, and after completion, the Heading is in the correct position. However, initially, the Heading is off-screen, causing unwanted horizontal scrolling.

To prevent this scrolling:

1. Select the parent element of the Heading
2. Set the parent element’s Overflow to hidden

This action hides any overflow beyond the boundary, but may clip the animation.

To retain the intended animation functionality, remove Overflow: hidden from the Div block and instead apply it to the next parent element in the hierarchy, the Section:

1. Select the parent element of the Heading
2. Set the parent element’s Overflow to visible
3. Choose the next parent element up (e.g., “Hero Section”)
4. Set the parent element’s Overflow to hidden

Now the animation works correctly, and there’s no more overflow.

Explore other solutions

You can also attempt these alternatives:

• Use percentage-based widths and maximum widths to prevent overflow.
  1. Allotted for parent elements and restricted for child elements
  2. Utilizing background images for Sections instead of inline Image elements (for instance, if the image is decorative and supposed to appear behind text or other content, opt for a background image)
  3. Employing X-ray mode for better visualization of the boundaries of elements causing overflow (the option to toggle X-ray mode is available in Canvas settings)
  4. Browsing through your website in the Designer while positioning your cursor above the additional right side whitespace to detect the elements leading to overflow

  Explore further about the minimum and maximum dimensions along with background images.

  Apply Overflow: hidden on a whole page

  If you are considering setting the highest element’s Overflow to hidden — the Body element.

  Implementing Overflow as hidden on the Body can truncate the remaining content on the page and hinder users from smoothly scrolling through your page beyond the initial viewport.

  If you need to enforce Overflow as hidden on an entire page, you can alternatively use a Div block as a wrapping element:

  1. Access the Add panel
  2. Drag a Div block onto your page beneath the Body
  3. Transfer all your page elements inside the Div block (for example, treating the Div block as a wrapper for all your content)
  4. Select your Div block wrapper
  5. Open Style panel > Size and specify Overflow as hidden (only after shifting all your content into the Div block wrapper)

  

  Isn’t it delightful that you have found a way to resolve your horizontal scrolling issues? Don’t keep it hidden!

  Learn more about design and overflow configurations.