CSS · Exercise 1 of 6Next
Beginner
Make a page mobile-ready
This page was built for a desktop. On a phone it would be shrunk to a tiny desktop view, and its 800px banner image makes the page scroll sideways.
Fix it in three steps: add the correct viewport meta tag in the <head> (without blocking zoom); make the image shrink to fit its container while keeping its shape; and give .page a max-width of 40rem, centred with automatic side margins.
What Check tests
- The page has a viewport meta tag with width=device-width and initial-scale=1
- Zoom is not blocked
- The image is never wider than the page
- The image keeps its 2:1 shape
- .page stops at 40rem and is centred
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.