Bird
Raised Fist0
CSSmarkup~5 mins

Breakpoints in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Breakpoints help your website look good on different screen sizes like phones, tablets, and computers.

You want your website text to be bigger on small screens for easy reading.
You want to change the layout from one column on phones to multiple columns on desktops.
You want images to resize or move depending on the device screen size.
You want buttons to be easier to tap on mobile devices.
You want to hide or show certain parts of your page on different devices.
Syntax
CSS
@media (condition) {
  /* CSS rules here */
}
Use @media to start a breakpoint rule.
Conditions like max-width or min-width define when the styles apply.
Examples
This changes the background color to light blue on screens 600px wide or smaller.
CSS
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
This sets a bigger font size for tablets between 601px and 1024px wide.
CSS
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 1.2rem;
  }
}
This sets an even bigger font size for desktops wider than 1024px.
CSS
@media (min-width: 1025px) {
  body {
    font-size: 1.5rem;
  }
}
Sample Program

This page changes background color and font size depending on the screen width using breakpoints.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Breakpoints Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: white;
      color: black;
      margin: 2rem;
      font-size: 1rem;
    }
    @media (max-width: 600px) {
      body {
        background-color: #d0f0fd;
        font-size: 1.2rem;
      }
    }
    @media (min-width: 601px) and (max-width: 1024px) {
      body {
        background-color: #f0e68c;
        font-size: 1.4rem;
      }
    }
    @media (min-width: 1025px) {
      body {
        background-color: #90ee90;
        font-size: 1.6rem;
      }
    }
  </style>
</head>
<body>
  <h1>Welcome to Responsive Design</h1>
  <p>Resize the browser window to see the background color and font size change.</p>
</body>
</html>
OutputSuccess
Important Notes

Always include the viewport meta tag for breakpoints to work well on mobile devices.

Use relative units like rem for font sizes to keep scaling consistent.

Test your breakpoints by resizing your browser or using device simulation in browser DevTools.

Summary

Breakpoints let you change styles based on screen size.

Use @media with conditions like max-width or min-width.

They help make websites look good on phones, tablets, and desktops.

Practice

(1/5)
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