Five small CSS changes that fix the mobile problems users notice most: unreachable buttons behind browser chrome, inputs that zoom the page, cramped tap targets and scroll positions that jump.
None of these need a redesign. All five fix problems that mobile users notice and desktop reviewers never see.
1. Use dvh, not vh, for full-height sections
100vh on mobile is measured against the viewport with the browser toolbar hidden, so a full-height hero pushes its call to action underneath the toolbar on first load. 100dvh tracks the viewport as it actually is. Keep 100vh as the preceding declaration for very old browsers and let dvh win where supported.
2. Set form inputs to at least 16px
Safari on iOS zooms the page whenever a user focuses an input with a font size below 16px, and then does not zoom back out. Users experience this as the site breaking. One rule on input, select and textarea prevents it, and there is no design reason to set body-level form text smaller than that anyway.
3. Give tap targets real size and real spacing
WCAG 2.2 asks for targets of at least 24 by 24 CSS pixels with adequate spacing, and 44 by 44 is the comfortable figure on touch devices. Use padding rather than height so the label stays centred, and check the gaps between adjacent links in a nav or footer — a technically large target surrounded by other targets is still a mis-tap.
4. Turn off scroll anchoring where it fights you
overflow-anchor keeps the scroll position stable when content loads above the viewport, which is normally what you want. In infinite scroll and live-updating lists it can pin the user in place while content moves underneath them. Disable it on those containers specifically, never globally.
5. Respect the safe area on notched devices
Fixed bottom bars, cookie banners and sticky calls to action sit under the home indicator on modern phones unless you account for it. Add viewport-fit=cover to the viewport meta tag and pad with env(safe-area-inset-bottom). This is the single most common reason a sticky mobile CTA is half-visible on a phone and perfect in a browser simulator.
The two-minute check
Open your site on a real phone — not a resized desktop window — and try to complete your primary action with one hand. Every one of these five problems shows up in that test, and none of them show up in any other.
Looking for more? Browse all resources.