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

Q: What’s the difference between min-width and max-width in media queries?

The `min-width` and `max-width` properties in CSS media queries define the range of viewport sizes where specific styles should apply. They are essential for creating responsive layouts that adapt to different devices. `min-width` applies styles **when the viewport is equal to or wider** than the specified width — typically used in **mobile-first** design. `max-width` applies styles **when the viewport is equal to or narrower** than the specified width — typically used in **desktop-first** design. You can combine them to target specific ranges, such as tablets or mid-sized devices. /* Mobile-first: applies from 600px and up */ @media (min-width: 600px) { body { background: lightblue; } } /* Desktop-first: applies up to 600px */ @media (max-width: 600px) { body { background: lightcoral; } } Resize the browser to see how min-width and max-width control styles differently.

Difficulty: 4/10

responsive design, media queries, layout

Difference Between min-width and max-width in Media Queries

The min-width and max-width properties in CSS media queries define the range of viewport sizes where specific styles should apply. They are essential for creating responsive layouts that adapt to different devices.

Key Differences

1
min-width applies styles when the viewport is equal to or wider than the specified width — typically used in mobile-first design.
2
max-width applies styles when the viewport is equal to or narrower than the specified width — typically used in desktop-first design.
3

Example: Using min-width and max-width

Scenario Questions

0-2 years experience

2-5 years experience

1A component should collapse to a single column below 480 px, but on some phones it stays in two columns. Walk me through how you’d debug the media queries.

Follow-up Questions