Media queries in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct syntax for a media query targeting screens wider than 600px

Which of the following CSS snippets correctly applies styles only when the screen width is greater than 600 pixels?

A @media screen and (min-width: 600px) { body { background: blue; } }

B @media screen and (max-width: 600px) { body { background: blue; } }

C } } ;eulb :dnuorgkcab { ydob { )xp006 :htdiw-nim( dna neercs aidem@

D @media (min-width: 600px) { body { background: blue; } }

💡 Hint

Remember that min-width means 'at least this width' and the syntax requires parentheses around the condition.

The correct syntax for a media query targeting screens wider than 600px uses @media screen and (min-width: 600px). Option A correctly uses parentheses and the min-width feature.

Option A targets screens smaller than or equal to 600px (max-width). Option A is missing a colon after min-width and parentheses. Option A is missing parentheses around the condition.

🧠 Conceptual

intermediate

What does this media query do?

Consider this CSS media query:

@media (max-width: 480px) { p { font-size: 1.2rem; } }

What is the effect of this media query?

A It increases the font size of paragraphs only on screens 480px wide or smaller.

B It increases the font size of paragraphs only on screens wider than 480px.

C It decreases the font size of paragraphs on all screen sizes.

D It applies the font size change only on screens exactly 480px wide.

💡 Hint

max-width means 'up to and including' the specified width.

The media query applies styles when the screen width is 480 pixels or less. So paragraphs get a larger font size only on small screens like phones.

❓ layout

advanced

How does this media query affect layout?

Given this CSS:

div.container { display: flex; flex-direction: row; } @media (max-width: 700px) { div.container { flex-direction: column; } }

What happens to the layout when the screen width is 650px?

A The container becomes hidden because flex-direction is invalid.

B The container's children stay in a row because max-width does not apply.

C The container's children stack vertically because flex-direction changes to column.

D The container's children stack horizontally with extra space.

💡 Hint

max-width: 700px applies to widths 700px and below.

When the screen is 650px wide, which is less than 700px, the media query changes the flex direction to column, stacking children vertically.

❓ accessibility

advanced

Which media query helps improve accessibility for users with low vision?

Which media query is best suited to increase text size for users who prefer larger fonts on their devices?

A @media (min-resolution: 2dppx) { body { font-size: 2rem; } }

B @media (hover: none) { body { font-size: 2rem; } }

C @media (prefers-reduced-motion: reduce) { body { font-size: 2rem; } }

D @media (prefers-contrast: more) { body { font-size: 2rem; } }

💡 Hint

Look for media features related to contrast or visual preferences.

The prefers-contrast: more media feature detects if the user prefers higher contrast, often related to accessibility needs like low vision. Increasing font size here helps readability.

Other options relate to motion, screen resolution, or hover capability, not text size preferences.

❓ rendering

expert

What is the background color when screen width is 800px?

Given this CSS:

body { background-color: white; } @media (min-width: 600px) and (max-width: 900px) { body { background-color: lightgray; } } @media (min-width: 850px) { body { background-color: darkgray; } }

What background color will the body have when the screen width is exactly 800px?

A white

B lightgray

C transparent

D darkgray

💡 Hint

Check which media queries apply at 800px and which override others.

At 800px, the first media query (min-width: 600px and max-width: 900px) applies, setting background to lightgray.

The second media query requires min-width: 850px, which 800px does not meet, so darkgray is not applied.

Therefore, the background is lightgray.

Practice

1. What is the main purpose of CSS @media queries?

easy

A. To link external CSS files

B. To add animations to elements

C. To apply different styles based on device screen size or features

D. To create CSS variables

Solution

1. Step 1: Understand what @media does

   @media queries let CSS change styles depending on device features like screen width.

2. Step 2: Compare options to this purpose

   Only To apply different styles based on device screen size or features describes applying styles based on screen size or features, which matches @media usage.

3. Final Answer:

   To apply different styles based on device screen size or features -> Option C

4. Quick Check:

   Media queries = responsive styles [OK]

Hint: Media queries adapt styles to screen size or device [OK]

Common Mistakes:

• Confusing media queries with animations
• Thinking media queries link CSS files
• Mixing media queries with CSS variables

2. Which of the following is the correct syntax to apply styles only when the screen width is 600px or less?

easy

A. @media (width < 600px) { /* styles here */ }

B. @media (max-width: 600px) { /* styles here */ }

C. @media screen and (min-width: 600px) { /* styles here */ }

D. @media max-width: 600px { /* styles here */ }

Solution

1. Step 1: Recall correct media query syntax for max-width

   The correct syntax uses @media (max-width: 600px) with parentheses and colon.

2. Step 2: Check each option

   @media (max-width: 600px) { /* styles here */ } matches the correct syntax. @media screen and (min-width: 600px) { /* styles here */ } uses min-width, which is opposite. @media (width < 600px) { /* styles here */ } uses invalid syntax. @media max-width: 600px { /* styles here */ } misses parentheses.

3. Final Answer:

   @media (max-width: 600px) { /* styles here */ } -> Option B

4. Quick Check:

   Use parentheses and colon for max-width [OK]

Hint: Use parentheses and colon for conditions in @media [OK]

Common Mistakes:

• Omitting parentheses around conditions
• Using min-width instead of max-width for smaller screens
• Writing conditions without colon

3. Given this CSS, what background color will the body have on a screen 500px wide?

body { background-color: white; } @media (max-width: 600px) { body { background-color: lightblue; } }

medium

A. Lightblue

B. White

C. No background color

D. Black

Solution

1. Step 1: Understand media query condition

   The media query applies styles when screen width is 600px or less. 500px is less than 600px, so it applies.

2. Step 2: Determine which background color applies

   The media query sets background to lightblue, overriding the default white for this screen size.

3. Final Answer:

   Lightblue -> Option A

4. Quick Check:

   Screen 500px ≤ 600px uses media query color [OK]

Hint: Check if screen width meets media query condition [OK]

Common Mistakes:

• Ignoring media query and picking default style
• Confusing max-width with min-width
• Assuming no style applies if media query exists

4. Identify the error in this media query CSS:

@media max-width: 800px { p { font-size: 1.2rem; } }

medium

A. Using max-width instead of min-width

B. Missing semicolon after font-size

C. Incorrect selector inside media query

D. Missing parentheses around the condition

Solution

1. Step 1: Check media query syntax

   The condition must be inside parentheses: @media (max-width: 800px).

2. Step 2: Verify other parts

   The selector p is valid, and semicolon is present. Using max-width is correct if targeting screens 800px or less.

3. Final Answer:

   Missing parentheses around the condition -> Option D

4. Quick Check:

   Media query conditions need parentheses [OK]

Hint: Always wrap media conditions in parentheses [OK]

Common Mistakes:

• Forgetting parentheses around conditions
• Confusing max-width and min-width usage
• Missing semicolons inside CSS blocks

5. You want a paragraph's font size to be 1.5rem on screens wider than 900px, and 1rem on smaller screens. Which CSS correctly achieves this?

hard

A. p { font-size: 1.5rem; } @media (max-width: 900px) { p { font-size: 1rem; } }

B. @media (max-width: 900px) { p { font-size: 1.5rem; } } p { font-size: 1rem; }

C. @media (min-width: 900px) { p { font-size: 1rem; } } p { font-size: 1.5rem; }

D. p { font-size: 1rem; } @media (min-width: 900px) { p { font-size: 1.5rem; } }

Solution

1. Step 1: Understand the requirement

   Font size should be 1.5rem on screens wider than 900px, and 1rem on smaller screens.

2. Step 2: Analyze each option

   p { font-size: 1.5rem; } @media (max-width: 900px) { p { font-size: 1rem; } } sets default font size to 1.5rem, then uses a media query with max-width 900px to reduce font size to 1rem on smaller screens. This matches the requirement.

3. Final Answer:

   p { font-size: 1.5rem; } @media (max-width: 900px) { p { font-size: 1rem; } } -> Option A

4. Quick Check:

   Default large, smaller inside max-width media query [OK]

Hint: Set default for large, override smaller with max-width query [OK]

Common Mistakes:

• Reversing min-width and max-width logic
• Setting default smaller and overriding larger incorrectly
• Missing default style outside media query