How to Find and Fix Horizontal Scroll
A step-by-step method to track down the element causing unwanted horizontal scroll on mobile and fix it without breaking other layouts.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Why horizontal scroll happens
Unwanted horizontal scroll means something is wider than the viewport. The usual suspects are a fixed-width element, an image or table without a max-width, negative margins, or a 100vw element on a page that has a scrollbar. It almost always shows up on mobile first because that's where the viewport is narrowest.
A fixed-width element wider than the screen
Images, videos, or tables without max-width: 100%
Negative margins pushing content past the edge
100vw including the scrollbar width
Track down the offending element
Find the culprit methodically. Add a temporary outline to everything, then look for the box that extends past the viewport edge. A quick script that logs elements wider than the document can pinpoint it instantly. Don't just hide overflow on the body - that masks the symptom and can break sticky and scroll behavior.
Outline every element to spot the overflowing box
Use a script to log elements wider than document width
Check both the element and its margins/padding
Avoid overflow-x: hidden as a blanket band-aid
Fix it and confirm on real widths
Common fixes are max-width: 100% on media, box-sizing: border-box, removing fixed widths, and using 100% instead of 100vw. Then confirm on actual mobile widths, since horizontal scroll is often invisible on desktop. Sizzy renders accurate phone widths so you can verify the overflow is truly gone, not just hidden.
Add max-width: 100% to images, video, and tables
Use box-sizing: border-box globally
Replace 100vw with 100% where a scrollbar exists
Verify on real mobile widths, not just desktop
Release checklist
The exact overflowing element is identified, not guessed.
Media and tables have max-width: 100%.
overflow-x: hidden isn't used to mask the real cause.
The fix is confirmed on actual mobile viewport widths.
Frequently asked questions
How do I find what's causing horizontal scroll?
Outline every element or run a script that logs any element wider than the document width. The overflowing box is usually a fixed-width element, an image or table without max-width, or a negative margin.
Should I just use overflow-x: hidden?
Avoid it as a blanket fix - it hides the symptom but leaves the real overflow in place and can break sticky positioning and scroll anchoring. Find and fix the element that's too wide instead.
Why does horizontal scroll only show on mobile?
The viewport is narrowest on mobile, so an element a bit too wide overflows there first while fitting fine on desktop. Always confirm overflow fixes on real mobile widths.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.