Measure the viewport units live
The red 100vw bar is wider than the green 100% bar: it ignores the body's margin, and may include a scrollbar. Resize the preview and run again.
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.