A phone visitor swipes down and the whole page slides sideways. Part of the headline, price, or button sits beyond the edge. The page may have one oversized element rather than a broken mobile design.
Find that element before adding overflow-x: hidden to the whole document. Clipping the symptom can leave content or controls out of reach. This guide helps you separate accidental page overflow from an intentional scrollable table or gallery.
- Find
- The element extending beyond the narrow viewport.
- Fix
- Correct its width, wrapping, or containing layout.
- Verify
- Read and operate the page at narrow widths and zoom.
Start with these checks
Reproduce the sideways movement
Check 320 and 390 CSS pixels, then confirm on a phone.
Inspect the widest suspect
Look at fixed-width cards, images, long URLs, and positioned decoration.
Keep intentional scrollers usable
A table may scroll locally while surrounding text fits the page.
Find the first element that escapes its container
Open the published page at a narrow viewport. Inspect the section where clipping starts, then compare its box with its parent. Temporarily disable a suspicious width or minimum width in developer tools. If the page fits afterward, you have a useful candidate, not yet a finished fix.
Repeat with the mobile menu open, form errors visible, and any notice banner shown. A clean first screenshot can miss a state that makes the document wider after interaction.
Fix the responsible component's sizing rule
For a card with a rigid width, allow it to shrink within its parent. In a flex or grid layout, also inspect the child's minimum width. If a long address is the cause, overflow-wrap: anywhere allows a break where an otherwise unbroken string cannot fit.
Apply the rule to the component that needs it. Do not shrink all text, clip every section, or force a complex data table into unreadable columns just to remove a scrollbar.
Illustrative pricing card
Before
A card stays 420px wide inside a phone layout with side padding.
Suggested change
The card uses the available container width, capped at 420px on larger screens; its content can wrap.
Original worked example. Inspect your own container and spacing before applying these selectors.
.pricing-card {
box-sizing: border-box;
width: 100%;
max-width: 420px;
min-width: 0;
}
.pricing-card .long-link { overflow-wrap: anywhere; }Check reflow without removing useful content
W3C's reflow guidance uses a width equivalent to 320 CSS pixels for ordinary vertically scrolling content. Some content that needs a two-dimensional layout, such as a data table, has an exception. Keep any necessary horizontal scrolling within that component where practical.
Retest the page at narrow widths and at 400% browser zoom from a 1280px-wide viewport. Read the headline and price, open the menu, tab to controls, and trigger form messages. Confirm that text and functions remain available. A scrollbar disappearing is insufficient if the CTA disappeared with it.
Save screenshots of the repaired state and the specific interaction that originally broke. A one-page audit can support the check; it cannot verify every template, device, and state across your site.
Turn the diagnosis into a change
Take the next step
Inspect [page URL] at 320px and 390px widths. Find the element causing document-level horizontal overflow and identify its responsible sizing or wrapping rule. Make the smallest scoped fix. Preserve intentional table or gallery scrolling and all visible content. Verify menus, form errors, keyboard focus, and browser zoom; report the selector changed and remaining affected states.
Use these instructions with your developer or coding assistant.
Questions before you change it
Should I put overflow-x: hidden on the body?
First locate the cause. Global clipping can conceal inaccessible content; a scoped overflow rule is appropriate only when the clipped content is intentionally decorative.
Is horizontal scrolling always a problem?
No. A useful table or gallery can scroll within its own area. The surrounding text and controls should still fit and remain usable.
Why does it only happen after opening the menu?
The overflow may belong to an interactive state. Inspect the open menu, its positioning, and its children rather than only the initial page.
Make the next fix about your page.
Paste one public page to get a free audit preview. See the priorities, then decide whether to unlock the full report and implementation brief.