How to fix horizontal scroll on mobile (CSS overflow guide)

Horizontal scroll is the most common responsive bug there is. On a phone it feels broken: the page wobbles left and right, a white strip appears at the edge, and Google flags the page as not mobile-friendly. The good news is that it always has a single cause — something is wider than the screen — and you can find it in under a minute.

Step 1: confirm it

Open your page in the AKCLNT Responsive Checker checker on a narrow phone such as the iPhone SE (375px) or Galaxy S24 (360px). Try to drag the page sideways inside the frame. If it moves, or you see a gap on the right, you have overflow. Use Single mode and drag the width slider slowly — the width where the problem starts tells you which breakpoint is broken.

Step 2: find the element that's too wide

Open the page in Chrome or Firefox, open DevTools (F12), switch to the device toolbar, choose a phone, and paste this into the Console:

[...document.querySelectorAll('*')].forEach(el => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1) {
    console.log(el); el.style.outline = '2px solid red';
  }
});

Every element that sticks out gets a red outline and is logged. Start with the deepest one in the list — its parents are usually only too wide because of it.

No console handy? Temporarily add this CSS and look for the box poking out on the right:

* { outline: 1px solid rgba(255, 0, 0, .35) !important; }

Step 3: fix the cause

These seven causes cover nearly every case.

1. Fixed widths

/* ✕ */ .container { width: 1200px; }
/* ✓ */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

2. Images, videos and embeds

img, video, iframe, svg, canvas { max-width: 100%; height: auto; }

3. 100vw

100vw includes the vertical scrollbar on desktop, so it's slightly wider than the page and causes a small sideways scroll.

/* ✕ */ .hero { width: 100vw; }
/* ✓ */ .hero { width: 100%; }

4. Flex and grid children that won't shrink

Flex and grid items default to min-width: auto, so a long word, a code block or a wide child stops them from shrinking.

.row > * { min-width: 0; }                       /* flex */
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* grid */

5. Long words, URLs and emails

p, li, td, a, h1, h2, h3 { overflow-wrap: anywhere; }

6. Tables and code blocks

Let them scroll inside their own box instead of widening the page:

<div class="table-wrap"><table>…</table></div>

<style>
.table-wrap, pre { max-width: 100%; overflow-x: auto; }
</style>

7. Negative margins and off-screen elements

Row helpers like margin: 0 -15px, translated slide-in menus and decorative blobs positioned past the edge all count. Clip them at the section that contains them:

.section-with-blobs { overflow-x: clip; }   /* doesn't break position: sticky */

Why not just overflow-x: hidden on body?

It's tempting, and sometimes it's fine as a final guard, but on its own it's a bandage:

• The overflowing content is still cut off — a button or price might be half-hidden.
• overflow: hidden on an ancestor breaks position: sticky headers.
• On some mobile browsers the page can still be panned sideways by touch.

Fix the element, then, if you want a safety net, prefer overflow-x: clip on html or the specific wrapper.

Step 4: verify on every width

Reload the page in AKCLNT Responsive Checker with the Big 3 preset, then sweep the width slider from 240px to 1440px in Single mode. In the checklist under the preview, mark No horizontal scrolling as passed — it goes into your downloadable report.

FAQ

Why does my website scroll horizontally on mobile?

One or more elements are wider than the viewport — usually a fixed width, a large image or table, an element set to 100vw, a long unbroken word or URL, negative margins, or a flex/grid child that can't shrink.

Is overflow-x: hidden on body a good fix?

Only as a last resort. It hides the symptom, can break position: sticky, and the overflowing content is still cut off. Find and fix the element that's too wide instead; if you need a guard, use overflow-x: clip on the specific wrapper.

How do I find which element causes horizontal scroll?

Paste a one-line script into DevTools that lists every element wider than the viewport, or temporarily add an outline to all elements so the one sticking out becomes visible.