Horizontal scrolling usually occurs when an element is wider than the screen or its container. On a responsive website, visitors should normally be able to view page content without scrolling sideways.
1. Find what is causing the overflow
Open the affected page on a mobile device or resize your browser window.
Look for elements extending beyond the right edge of the screen, such as:
Images
Videos
Tables
Text blocks
Buttons
Navigation menus
Embedded content
Identify the element causing the overflow before changing the website.
2. Check fixed widths
An element with a fixed width can become wider than a mobile screen.
For example, avoid setting a content element to a fixed width that cannot shrink on smaller screens.
Use flexible sizing where appropriate so elements can adapt to the available space.
3. Check images and videos
Make sure images and videos can shrink within their containers.
A common CSS approach for images is:
img {
max-width: 100%;
height: auto;
}
Also check embedded videos, maps and other external content for fixed dimensions.
4. Check tables and long content
Large tables may not fit comfortably on a small screen.
Depending on the information, you may need to make the table horizontally scrollable within its own container or use a different mobile presentation.
Also check for long URLs, unbroken text or other content that cannot wrap normally.
5. Check your navigation and page layout
Menus, columns and other layout elements can also cause overflow.
On smaller screens, columns may need to stack and desktop navigation may need to change to a mobile menu.
6. Test after fixing the problem
Check the affected page at different screen widths.
Test:
Mobile
Tablet
Desktop
Also check other pages that use the same layout or component. Fixing one page may not resolve the same problem elsewhere.
Salesforce
