Fix a page that overflows horizontally on mobile

A layout looks correct on a desktop but requires sideways scrolling on a phone. Shrinking every font makes the page less readable without identifying the overflowing element.

Why this happens

Fixed widths, long unbroken content and flex or grid items with restrictive minimum sizing can exceed the viewport. Code blocks and images are frequent contributors.

Step-by-step solution

1. Use browser layout tools to identify the element wider than the viewport. Test a narrow width with long realistic titles and URLs.

2. Replace inappropriate fixed widths with responsive constraints. Apply min-width:0 to flex children when they need to shrink, and constrain media to its container.

3. Give code samples their own horizontal scroll area and allow ordinary text to wrap. Avoid hiding overflow on the whole page as the first fix.

Worked example

.card { min-width: 0; }
.card img { max-width: 100%; height: auto; }
.card p { overflow-wrap: anywhere; }
.card pre { overflow-x: auto; }

Verify the fix

Test at 320 CSS pixels and with increased text size. The document should fit while code remains readable through its own scrolling region.

Prevent a repeat

Include long-content fixtures in layout reviews. A design that works only with short placeholder text is not yet robust.

Reference

Official documentation or standards guidance

An original Gistmax troubleshooting guide. Scenarios and sample values are illustrative; configuration depends on your software version and environment. Cover diagram: Gistmax Tutorials.