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.