What does this CSS do?
@media (max-width: 600px) {
.sidebar { display: none; }
}Options
- It always hides the sidebar on every screen size
- It hides the sidebar on screens up to 600px wide (Correct option)
- It makes the sidebar exactly 600px wide on screens
- It hides the sidebar only on large desktop screens
Answer
Hides the sidebar only when the screen is 600px wide or narrower
Why
A media query applies its CSS rules only when a condition is true, here: the viewport is at most 600px wide (phones).
This is the basis of responsive design: one page that adapts its layout to different screen sizes.
Many teams write mobile styles first and add min-width queries for larger screens.
Remember
Media queries = CSS that depends on screen size.