TalentJR apps
People open web pages on phones, tablets and big screens, so a good page is responsive: it changes to fit. A media query wraps CSS that applies only when the screen matches. max-width means up to that width, so it is for narrow screens; min-width means at least that width, so it is for wide screens. The viewport meta tag helps phones show the page at the right size.
✓ You passed this lesson’s test.
Does the screen match? — “a media query rule applies only when the screen width matches”
Use it for: Making pages that look good on a phone and on a laptop.
Check: On a 320px phone it would stay 16px ✓
▶ Watch it animatedWork it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.
Right: 0 · Tried: 0
20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.
🏅 Sign in with Google to earn the 📱 Responsive Ranger badge when you pass — and a certificate when you finish all 10 lessons of Part 2 · CSS. You can still take the test without signing in.
Why does it work? When should you use it? Ask in English, मराठी or हिंदी.
Sign in with Google to ask Free — 20 questions a day.
Prefer a real teacher? TalentJR teachers take live online classes anywhere in India and visit homes in selected cities. Tell us what you need and our team will call you with timings and fees.