Fixed width vs fluid width
The preview is narrow, so the red box overflows and you get a sideways scrollbar. The green box fits. Widen the preview (or your window) past 500px and both look the same; that's why fixed widths seem fine on a desktop and break on a phone.
Responsive design means one page whose layout adapts to any screen: start with the small-screen layout (mobile first), size things fluidly instead of in fixed pixels, and add the viewport meta tag so phones show the page at its real width.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the HTML <head> lines and CSS for a page wrapper that fills a phone with a 16px gutter and stops at 720px wide, centred, on larger screens.
Rewrite this desktop-first CSS as mobile first: .nav { display: flex; } @media (max-width: 599px) { .nav { display: block; } }.
Make a list of product cards that shows as many columns as fit, each at least 200px wide, without any media query and without overflowing a 180px-wide screen.
Explain it without notes
What is responsive design, and what are its main ingredients?
What does the viewport meta tag do, and what happens without it?
What does "mobile first" mean in CSS, and why is it usually preferred?
How should you choose breakpoints?
Preview
Console
Nothing logged yet.