SideGuy Fixables · Real Human Clarity · Apr 2026
Desktop looks fine.
Mobile is broken.
Layout shifts, cut-off content, and unreachable buttons on mobile almost always come from missing viewport tags or CSS that doesn't have media queries.
Check in Chrome DevTools
F12 → click the mobile icon (top-left of DevTools) → select a phone size. You'll see exactly what mobile users see. Resize to find where things break.
Common causes & fixes
Missing viewport meta tag
Without <meta name="viewport" content="width=device-width, initial-scale=1.0">, mobile browsers zoom out to fit desktop width.
Fixed pixel widths
Elements with width: 900px overflow on small screens. Use max-width: 900px; width: 100% instead.
No media queries
Desktop-only CSS doesn't adapt to small screens. Add @media(max-width:640px){} breakpoints for key elements.
Touch targets too small
Buttons under 44×44px are hard to tap on mobile. Increase padding on links and buttons.
Start with these mobile-safe CSS defaults:
/* Quick mobile fix — add to your CSS */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
.container { max-width: 100%; padding: 0 16px; }