Breakpoints in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Breakpoint Usage

Which CSS media query correctly applies styles only when the screen width is between 600px and 900px?

A @media screen and (min-width: 600px) or (max-width: 900px) { /* styles */ }

B @media (max-width: 600px) and (min-width: 900px) { /* styles */ }

C @media (min-width: 600px) and (max-width: 900px) { /* styles */ }

D @media (min-width: 600px), (max-width: 900px) { /* styles */ }

💡 Hint

Think about how to combine conditions so both must be true at the same time.

The correct syntax uses and to combine conditions that must both be true. Option C applies styles only when the screen width is between 600px and 900px.

Option C has the min and max reversed, so it never matches. Option C uses a comma which means 'or', so it applies styles outside the range too. Option C uses 'or' which applies styles if either condition is true, not both.

📝 Syntax

intermediate

Identify the Syntax Error in Media Query

What error does this CSS media query produce?

@media screen min-width: 500px) { body { background: blue; } }

CSS

@media screen min-width: 500px) { body { background: blue; } }

A SyntaxError: Missing opening parenthesis before 'min-width'

B SyntaxError: Missing colon after 'screen'

C SyntaxError: Missing opening parenthesis after 'screen'

D No error, valid syntax

💡 Hint

Check the parentheses around the condition.

Media queries require conditions to be inside parentheses. The correct syntax is @media screen and (min-width: 500px). Here, the opening parenthesis before min-width is missing, causing a syntax error.

❓ rendering

advanced

What background color will the box have on a 700px wide screen?

Given this CSS, what background color will the box have if the screen width is exactly 700px?

.box { background: yellow; }
@media (max-width: 600px) { .box { background: red; } }
@media (min-width: 601px) and (max-width: 800px) { .box { background: green; } }
@media (min-width: 801px) { .box { background: blue; } }

CSS

.box { background: yellow; }
@media (max-width: 600px) { .box { background: red; } }
@media (min-width: 601px) and (max-width: 800px) { .box { background: green; } }
@media (min-width: 801px) { .box { background: blue; } }

A red

B green

C blue

D yellow

💡 Hint

Check which media query matches 700px width.

The base background is yellow. The first media query applies red only up to 600px. The second media query applies green between 601px and 800px, which includes 700px. The last applies blue above 800px. So at 700px, the background is green.

❓ selector

advanced

Which media query targets only portrait orientation on screens wider than 480px?

Select the correct media query that applies styles only when the device is in portrait mode and the screen width is greater than 480px.

A @media (orientation: portrait) and (min-width: 481px) { /* styles */ }

B @media (min-width: 481px), (orientation: portrait) { /* styles */ }

C @media (orientation: portrait) or (min-width: 481px) { /* styles */ }

D @media screen and (orientation: portrait) or (min-width: 481px) { /* styles */ }

💡 Hint

Use 'and' to combine conditions that must both be true.

Option A correctly uses and to require both portrait orientation and minimum width greater than 480px.

Options A and C use commas or 'or', which apply styles if either condition is true, not both. Option A mixes 'and' and 'or' without parentheses, causing unexpected behavior.

❓ accessibility

expert

How to ensure accessible breakpoint changes for screen readers?

When using CSS breakpoints to change layout, which practice best supports screen reader users?

A Use JavaScript to remove hidden content from the DOM at breakpoints to improve screen reader experience.

B Use CSS to visually hide content but keep it accessible by using <code>visibility: hidden</code>.

C Use <code>display: none</code> on content at breakpoints to hide it visually and from screen readers.

D Use only CSS to hide content visually at breakpoints without removing it from the accessibility tree.

💡 Hint

Think about how screen readers interpret hidden content.

Option D is best because visually hiding content (e.g., with clip-path or position: absolute; left: -9999px;) keeps it in the accessibility tree for screen readers.

Option D removes content from the DOM, which can confuse users. Option D hides content from both visual and screen readers, which may remove important information. Option D hides content visually but visibility: hidden also hides it from screen readers.

Practice

1. What is the main purpose of CSS breakpoints in responsive design?

easy

A. To load different images

B. To add animations to elements

C. To change styles based on screen size

D. To create fixed-width layouts

Solution

1. Step 1: Understand what breakpoints do

   Breakpoints let CSS apply different styles depending on the screen size.

2. Step 2: Identify the purpose in responsive design

   This helps websites look good on phones, tablets, and desktops by adjusting layout and style.

3. Final Answer:

   To change styles based on screen size -> Option C

4. Quick Check:

   Breakpoints = change styles by screen size [OK]

Hint: Breakpoints adjust styles for different screen sizes [OK]

Common Mistakes:

• Thinking breakpoints add animations
• Confusing breakpoints with image loading
• Believing breakpoints fix layout width

2. Which of the following is the correct syntax to apply styles for screens smaller than 600px?

easy

A. @media screen and (max-width: 600px) { ... }

B. @media screen and (min-width: 600px) { ... }

C. @media screen and (width: 600px) { ... }

D. @media screen or (max-width: 600px) { ... }

Solution

1. Step 1: Understand max-width usage

   To target screens smaller than 600px, use max-width: 600px.

2. Step 2: Check syntax correctness

   @media screen and (max-width: 600px) { ... } uses correct syntax: '@media screen and (max-width: 600px) { ... }'.

3. Final Answer:

   @media screen and (max-width: 600px) { ... } -> Option A

4. Quick Check:

   max-width targets smaller screens [OK]

Hint: Use max-width for smaller screens, min-width for larger [OK]

Common Mistakes:

• Using min-width instead of max-width for smaller screens
• Using 'or' instead of 'and' in media query
• Using width instead of max-width or min-width

3. Given the CSS below, what background color will the body have on a screen width of 700px?

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

medium

A. Red

B. No background color

C. Both red and blue

D. Blue

Solution

1. Step 1: Check which media query matches 700px

   700px is greater than 600px, so max-width: 600px does not apply.

2. Step 2: Identify the matching media query

   min-width: 601px applies for 700px, so background: blue is used.

3. Final Answer:

   Blue -> Option D

4. Quick Check:

   700px > 600px uses min-width styles [OK]

Hint: Check if width fits max-width or min-width condition [OK]

Common Mistakes:

• Choosing red because max-width looks similar
• Thinking both colors apply simultaneously
• Ignoring min-width condition

4. Identify the error in this media query:

@media screen and max-width: 800px { body { font-size: 1.2rem; } }

medium

A. Missing parentheses around max-width condition

B. Using 'screen' instead of 'all'

C. font-size value is invalid

D. No error, syntax is correct

Solution

1. Step 1: Check media query syntax

   Media features like max-width must be inside parentheses.

2. Step 2: Identify the missing parentheses

   The query should be '@media screen and (max-width: 800px) { ... }'.

3. Final Answer:

   Missing parentheses around max-width condition -> Option A

4. Quick Check:

   Media features need parentheses [OK]

Hint: Put media features inside parentheses ( ) [OK]

Common Mistakes:

• Omitting parentheses around conditions
• Confusing media types like screen and all
• Thinking font-size value causes error

5. You want a layout that shows a sidebar only on screens wider than 900px. Which CSS snippet correctly uses a breakpoint to hide the sidebar on smaller screens?

hard

A. @media (min-width: 900px) { .sidebar { display: none; } }

B. @media (max-width: 900px) { .sidebar { display: none; } }

C. @media (max-width: 900px) { .sidebar { display: block; } }

D. @media (min-width: 900px) { .sidebar { display: block; } }

Solution

1. Step 1: Understand the requirement

   The sidebar should be hidden on screens smaller than or equal to 900px.

2. Step 2: Choose the correct media query

   Use max-width: 900px to target smaller screens and set display: none to hide sidebar.

3. Final Answer:

   @media (max-width: 900px) { .sidebar { display: none; } } -> Option B

4. Quick Check:

   max-width hides sidebar on small screens [OK]

Hint: Use max-width to hide on small screens, min-width to show on large [OK]

Common Mistakes:

• Using min-width to hide sidebar on large screens
• Setting display: block inside max-width query
• Confusing when to hide or show sidebar