New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
My hero section fills the screen on desktop, but the bottom half hides behind the browser bar on my phone.
What you'll have at the end
A full-height section sized with svh instead of vh, visible in full the instant the page loads
You need
A section styled to fill the screen with the old percent-of-viewport height unit, and a live version of the page you can open on an actual phone.
Not covered
Keeping a form field visible above an on-screen keyboard, which calls for the browser's own live viewport tracking in script instead of a CSS height unit.
Leans on
Finding the element causing a horizontal scrollbar on mobile
the section clips sideways instead of at the bottom: that's a horizontal overflow bug, a different mechanism from the address bar this fixes.
Add the missing viewport meta tag
the whole page renders tiny and zoomed out rather than just clipped at the bottom: that points to a missing viewport tag instead.
Checked 20 Aug 2026
Part of the Responsive Web Design cookbook