Responsive design and media queries — HTML and CSS for kids
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.
Does the screen match? — “a media query rule applies only when the screen width matches”
@media (max-width: 600px) { … } applies when the screen is 600px or narrower.
@media (min-width: 800px) { … } applies when the screen is 800px or wider.
If the media query matches, its rule replaces the normal one; if not, the normal rule stays.
Use it for: Making pages that look good on a phone and on a laptop.
Worked example: 📱 The screen is 820px wide. What font-size (px) does the paragraph get?
p {
font-size: 16px;
}
@media (min-width: 600px) {
p {
font-size: 22px;
}
} → 22
820 is at least 600, so the min-width rule applies.
Work it out in your head or on paper, then tap your answer — or type it and press Check. Stuck? Press “Show me how”.
Right: 0 · Tried: 0
🏁 Lesson 19 test
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.
👩🏫 HTML and CSS classes — live online, request a call back
Prefer a real teacher? TalentJR teachers take live online classes anywhere in India. Tell us what
you need and our team will call you with timings and fees.
💻Live online classesSmall groups or 1:1 with a teacher, from home, any city.
📞We call you backOur team asks what your child needs, then shares timings and fees.
🏠Home tutor?We are still building our list of home tutors — ask on the call if there is one near you.
