Troubleshooting - Prevent white space when horizontally scroll
The Website Builder aims to reduce the chance of horizontal scrolling by setting a maximum content width that doesn't surpass the boundaries of its container. Nevertheless, certain user configurations may still result in occasional horizontal page scrolling, such as:
Assign an excessively large width and add margins to the block
Set up full-width carousel sections without configured padding
Add custom HTML code
You can identify the section that is incorrectly configured and leading to horizontal scrolling by checking the section where a scroll bar appears and condenses the layout in the storefront.
In this guide, we will list general information and solutions for some common issues.
A. Assign an excessively large width and add margins to the block
B. Set up full-width carousel sections without configured padding
C. Add custom HTML code
Example: When a user has specified an overly large width for the block (full-width section, block set width 100%,..) and has also applied margins (left/right), which has led to the block extending beyond the bounds of its container.
Solution:
Adjust the block's width setting to Auto.
Adjust the block width to a smaller value in pixels. You must manually adjust pixels of extending block on both mobile and desktop interfaces.
Example: When a user sets a carousel layout that spans the full width of the section and has not specified any padding for the section. Consequently, the arrow lacks sufficient space to be displayed fully.
Solution:
Increase the padding for the block/section to ensure that there is sufficient space to display the arrow.
Turn off the full width of the section
Example: When a user adds a custom HTML code, it might contain properties that cause the page to display spaces and scroll horizontally.
Solution: Review the HTML code you have inserted and make modifications on your own, ensuring to carefully examine the sections with the width and margin attributes.
Get started with Website Builder
Set up blocks on Website Builder
Set up sections on Website Builder
Assign an excessively large width and add margins to the block
Set up full-width carousel sections without configured padding
Add custom HTML code
You can identify the section that is incorrectly configured and leading to horizontal scrolling by checking the section where a scroll bar appears and condenses the layout in the storefront.
In this guide, we will list general information and solutions for some common issues.
In this article
A. Assign an excessively large width and add margins to the block
B. Set up full-width carousel sections without configured padding
C. Add custom HTML code
A. Assign an excessively large width and add margins to the block
Example: When a user has specified an overly large width for the block (full-width section, block set width 100%,..) and has also applied margins (left/right), which has led to the block extending beyond the bounds of its container.
Solution:
Adjust the block's width setting to Auto.
Adjust the block width to a smaller value in pixels. You must manually adjust pixels of extending block on both mobile and desktop interfaces.
B. Set up full-width carousel sections without configured padding
Example: When a user sets a carousel layout that spans the full width of the section and has not specified any padding for the section. Consequently, the arrow lacks sufficient space to be displayed fully.
Solution:
Increase the padding for the block/section to ensure that there is sufficient space to display the arrow.
Turn off the full width of the section
C. Add custom HTML code
Example: When a user adds a custom HTML code, it might contain properties that cause the page to display spaces and scroll horizontally.
Solution: Review the HTML code you have inserted and make modifications on your own, ensuring to carefully examine the sections with the width and margin attributes.
Related articles
Get started with Website Builder
Set up blocks on Website Builder
Set up sections on Website Builder
Updated on: 15/03/2024
Thank you!