A full-screen hero that fits on phones
Here the viewport is the preview frame. Drag the split to resize it and watch the hero follow the frame's height.
Viewport units size things as a percentage of the browser window: vw and vh for width and height, vmin/vmax for the smaller or larger side, and svh, lvh and dvh to cope with mobile address bars that appear and disappear.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a .modal box that is never more than 90% of the window's width or 80% of the visible height on phones, and centre it with position: fixed.
Make a square .avatar that is 40% of the window's smaller side.
Explain it without notes
What is the difference between width: 50% and width: 50vw?
Explain the mobile address bar problem and how svh, lvh and dvh solve it.
Why can width: 100vw cause a horizontal scrollbar?
Why is font-size: 5vw on its own an accessibility problem?
Preview
Console
Nothing logged yet.