How to Fix Content Wider Than the Screen

Stop horizontal scrolling on mobile by replacing fixed widths with responsive ones.

Medium High Impact 20 min

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

In responsive DevTools, look for the element extending past the screen edge (fixed-width containers, images, tables are common).

Use fluid widths

Replace fixed width with max-width + width: 100%, and cap media with max-width: 100%.

Handle wide tables

Wrap wide tables/code in a container with overflow-x: auto so only that element scrolls, not the page.

Code Fix

css

Before (broken)

.wrap { width: 1200px; }   /* overflows phones */
img { width: 800px; }

After (fixed)

.wrap { max-width: 1200px; width: 100%; }
img { max-width: 100%; height: auto; }

Platform-Specific Instructions

WordPress

Check page-builder rows set to fixed pixel widths and full-width images; switch them to percentage/responsive widths.

Next.js

Use responsive utilities (max-w-full, w-full) and next/image for fluid media.

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit