Skip to main content
SlapMyWeb
Slap a site

Mobile fix

How to Fix Content Wider Than the Screen

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

Difficulty
Medium
Impact
High
Time
20 min

Before

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

After

.wrap { max-width: 1200px; width: 100%; }
img { max-width: 100%; height: auto; }
Before and after code for: How to Fix Content Wider Than the Screen

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 it

  1. Find the overflow

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

  2. Use fluid widths

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

  3. Handle wide tables

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

The code

Beforecss
.wrap { width: 1200px; }   /* overflows phones */
img { width: 800px; }
Aftercss
.wrap { max-width: 1200px; width: 100%; }
img { max-width: 100%; height: auto; }

On your platform

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.

Sources

More fixes

Mobile

How to Fix a Missing Viewport Meta Tag

Add the tag that makes a responsive layout actually apply on phones.

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

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
Free foreverNo signupLive scan progress