A fluid heading and a readable column
The sizes depend on the preview's width, so they are shown on the page instead of the console.
calc() does arithmetic with mixed units, min() and max() pick the smaller or larger of several values, and clamp(MIN, PREFERRED, MAX) keeps a fluid value between limits; together they make sizes that adapt smoothly without media queries.
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 an image wrapper .media that is 50% of its parent, but never narrower than 200px and never wider than 480px.
Lay out three .col boxes side by side with display: inline-block, each exactly one third of the parent minus a 1rem gap share, using calc().
Write a fluid h2 that is 18px at a 360px screen and 28px at a 1360px screen.
Explain it without notes
Why does calc() need spaces around + and - but not around * and /?
Explain min() and max() and why they feel backwards.
Write the formula clamp() is equivalent to, and explain each argument.
How do you build an accessible fluid font size between two screen widths?
Preview
Console
Nothing logged yet.