Media queries (responsive design)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Is @media a native CSS rule or an HTML layout tag?
2. Which media feature targets screens smaller than or equal to a specific width dimension?
3. Which character tokens must wrap a media feature condition like max-width: 768px?
4. What condition does @media (orientation: portrait) evaluate?
5. Can you join multiple media query conditions together using the 'and' logical keyword?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1@media (max-width: 600px) { .box { display: none; } } | A@media screen and (max-width: 480px) { img { width: 100%; } } | |
| 2@media (min-width: 1024px) { body { font-size: 18px; } } | B@media (orientation: landscape) { .nav { height: 50px; } } | |
| 3A responsive design rule that applies specific styles when a device is held horizontally. | CFails because it is missing the mandatory @ character at the very beginning of the rule. | |
| 4Combines screen type and a maximum width condition to style mobile devices. | DFails because media feature expressions like max-width must be enclosed in parentheses. | |
| 5@media max-width: 768px { p { color: blue; } } | EHides elements with the box class on screens that are 600 pixels wide or smaller. | |
| 6media (min-width: 480px) { h1 { font-size: 2rem; } } | FIncreases body text font size for desktop screens 1024 pixels wide or larger. |
C
Definitions
@media
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
______ (max-width: 600px) {
body { color: red; }
}
2.
@media (***: 768px) {
.nav { display: block; }
}
3.
@media (***: 480px) {
.sidebar { display: none; }
}
4.
@media ______ and (max-width: 900px) {
.card { width: 50%; }
}
5.
@media (orientation: _________) {
.hero { height: 100vh; }
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
media (max-width: 700px) {
B
.box { width: 100%; }
C
}
Question 2
A
@media (max-width: 600px) {
B
.container { width = 100%; }
C
}
Question 3
A
@media (min-width: 768px) {
B
.nav {
C
display flex;
D
}
E
}
Question 4
A
@media (min-width: 800px) {
B
.grid {
C
display: grid;
D
} pixels
E
}
Question 5
A
@media screen-only and (max-width: 500px) {
B
body { background: white; }
C
}
Answer Key
Media queries (responsive design)
Section A: Quick Questions
Q1
B — CSS rule
Q2
B — max-width
Q3
A — Parentheses ( )
Q4
A — Viewport height is greater than or equal to width
Q5
A — Yes
Section B: Match the Pairs
Q1
@media (max-width: 600px) {
.box { display: none; }
} → Hides elements with the box class on screens that are 600 pixels wide or smaller.
Q2
@media (min-width: 1024px) {
body { font-size: 18px; }
} → Increases body text font size for desktop screens 1024 pixels wide or larger.
Q3
A responsive design rule that applies specific styles when a device is held horizontally. → @media (orientation: landscape) {
.nav { height: 50px; }
}
Q4
Combines screen type and a maximum width condition to style mobile devices. → @media screen and (max-width: 480px) {
img { width: 100%; }
}
Q5
@media max-width: 768px {
p { color: blue; }
} → Fails because media feature expressions like max-width must be enclosed in parentheses.
Q6
media (min-width: 480px) {
h1 { font-size: 2rem; }
} → Fails because it is missing the mandatory @ character at the very beginning of the rule.
Section C: Definitions
Q1
@media — A CSS rule used to apply different styles for different media types or screen sizes.Section D: Fill in the Blanks
Q1
@media (max-width: 600px) {
body { color: red; }
}Q2
@media (min-width: 768px) {
.nav { display: block; }
}Q3
@media (max-width: 480px) {
.sidebar { display: none; }
}Q4
@media screen and (max-width: 900px) {
.card { width: 50%; }
}Q5
@media (orientation: landscape) {
.hero { height: 100vh; }
}Section E: Spot the Error
Q1
A — Line 0 is incorrect because it is missing the mandatory @ character at the beginning of media.
Q2
B — Line 1 is incorrect because CSS properties inside a media query block must use colons (:), not equals signs (=).
Q3
C — Line 2 is incorrect because the colon separating the display property and its value is missing.
Q4
D — Line 3 is incorrect because the trailing word pixels is invalid syntax after a closing brace.
Q5
A — Line 0 is incorrect because screen-only is an invalid media type; you should use screen instead.