Breakpoints in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a breakpoint in CSS?

A breakpoint is a specific screen width where the layout or style of a webpage changes to better fit the screen size. It helps make websites look good on phones, tablets, and desktops.

beginner

How do you write a simple CSS media query for a breakpoint at 600px?

You write:

@media (max-width: 600px) { /* CSS rules here */ }

This means the CSS inside applies when the screen is 600 pixels wide or smaller.

beginner

Why are breakpoints important for responsive design?

Breakpoints let your website adjust its layout and style for different screen sizes. This makes your site easy to use on phones, tablets, and big screens without zooming or scrolling sideways.

intermediate

What is the difference between max-width and min-width in media queries?

max-width applies styles when the screen is smaller than or equal to a size. min-width applies styles when the screen is larger than or equal to a size. They help target different device sizes.

beginner

Give an example of a common breakpoint width used in CSS.

A common breakpoint is 768px, which often targets tablets. For example: <pre>@media (min-width: 768px) { /* tablet and larger styles */ }</pre>

What does this media query do?

@media (max-width: 480px) { ... }

A Applies styles on screens taller than 480px

B Applies styles when the screen is wider than 480px

C Applies styles only on screens exactly 480px wide

D Applies styles when the screen is 480px wide or smaller

max-width means the styles apply when the screen width is less than or equal to 480 pixels.

Which CSS feature is used to create breakpoints?

A Media queries

B Grid

C Flexbox

D Animations

Media queries let you apply CSS rules based on screen size, which is how breakpoints work.

If you want styles to apply only on large screens, which media query would you use?

A @media (max-width: 600px)

B @media (min-width: 1024px)

C @media (max-height: 800px)

D @media (orientation: landscape)

min-width: 1024px applies styles when the screen is at least 1024 pixels wide, targeting large screens.

What is the main goal of using breakpoints in web design?

A To add animations

B To make websites load faster

C To make websites look good on different screen sizes

D To change font colors

Breakpoints help adjust layouts so websites look good on phones, tablets, and desktops.

Which unit is commonly used in breakpoints for media queries?

A px (pixels)

B em

C %

D vh

Pixels (px) are the most common unit for defining breakpoint widths.

Explain what a breakpoint is and why it is useful in web design.

Think about how websites change on phones versus desktops.

Describe how to write a media query for a breakpoint at 768px and what it means.

Use @media and max-width or min-width with 768px.

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