Intermediate
A fluid heading with clamp()
Make the h1 fluid: 28px (1.75rem) on small screens, growing smoothly with the viewport width, and never more than 48px (3rem).
Use clamp() with a preferred value that mixes rem and vw, so zoom keeps working.
What Check tests
- The h1 font-size uses clamp()
- The preferred value grows with the viewport and includes rem
- On a tiny screen it is 28px
- On a huge screen it stops at 48px
- Right now it is between 28px and 48px
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.