How to Fix Content Wider Than the Screen
Stop horizontal scrolling on mobile by replacing fixed widths with responsive ones.
Content wider than the screen means a page forces horizontal scrolling on a phone, usually because one element has a fixed pixel width, an unbroken string, or a table with no scroll container. Find the overflowing element, give it a max-width of 100%, and let long content wrap or scroll inside its own box rather than the page.
Why It Matters
When an element is wider than the viewport, phones show a horizontal scrollbar and zoom out — a classic mobile-usability failure. The cause is almost always a fixed pixel width, an oversized image, or a wide table/code block.
How to Fix
Find the overflow
Use fluid widths
width with max-width + width: 100%, and cap media with max-width: 100%.Handle wide tables
overflow-x: auto so only that element scrolls, not the page.Code Fix
css.wrap { width: 1200px; } /* overflows phones */
img { width: 800px; }.wrap { max-width: 1200px; width: 100%; }
img { max-width: 100%; height: auto; }Platform-Specific Instructions
Check page-builder rows set to fixed pixel widths and full-width images; switch them to percentage/responsive widths.
Use responsive utilities (max-w-full, w-full) and next/image for fluid media.
Fixed that one.
Now find the rest.
A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.
Run a free audit