Breakpoints in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a breakpoint for screens wider than 600px.

CSS

@media (min-width: [1]) {
  body {
    background-color: lightblue;
  }
}

Drag options to blanks, or click blank then click option'

A600px

B400px

C1000px

D300px

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width

Forgetting to add units like px

Using a value too small or too large

The min-width media feature sets a breakpoint for screens wider than the given width. Here, 600px means styles inside apply when the screen is at least 600 pixels wide.

2fill in blank

medium

Complete the code to apply styles only on screens smaller than 768px.

CSS

@media ([1]: 768px) {
  p {
    font-size: 1.2rem;
  }
}

Drag options to blanks, or click blank then click option'

Amin-width

Bheight

Cmax-width

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using min-width instead of max-width

Omitting units like px

Using unrelated media features like height

The max-width media feature targets screens up to the specified width. Here, styles apply only when the screen is 768 pixels wide or less.

3fill in blank

hard

Fix the error in the breakpoint code to target screens between 480px and 1024px.

CSS

@media (min-width: 480px) and ([1]: 1024px) {
  div {
    padding: 2rem;
  }
}

Drag options to blanks, or click blank then click option'

Amax-height

Bmin-height

Cmin-width

Dmax-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using min-width twice

Using height instead of width

Using max-height which targets screen height

To target screens between two widths, use min-width for the lower limit and max-width for the upper limit. Here, 1024px is the max-width.

4fill in blank

hard

Fill both blanks to create a breakpoint for screens between 320px and 480px wide.

CSS

@media ([1]: 320px) and ([2]: 480px) {
  h1 {
    color: green;
  }
}

Drag options to blanks, or click blank then click option'

Amin-width

Bmax-height

Cmax-width

Dmin-height

Attempts:

3 left

💡 Hint

Common Mistakes

Using height media features instead of width

Reversing min and max

Using the same media feature twice

Use min-width for the lower limit and max-width for the upper limit to target screen widths between 320px and 480px.

5fill in blank

hard

Fill all three blanks to create a responsive font size that changes at three breakpoints: 480px, 768px, and 1024px.

CSS

body {
  font-size: 1rem;
}

@media ([1]: 480px) {
  body {
    font-size: 1.2rem;
  }
}

@media ([2]: 768px) {
  body {
    font-size: 1.5rem;
  }
}

@media ([3]: 1024px) {
  body {
    font-size: 1.8rem;
  }
}

Drag options to blanks, or click blank then click option'

Amin-width

Bmax-width

Cmin-height

Dmax-height

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing min-width and max-width incorrectly

Using height media features instead of width

Forgetting units like px

Using min-width for all breakpoints applies styles as the screen gets wider, increasing font size at each breakpoint.

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