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
You can combine them to target specific ranges, such as tablets or mid-sized devices.

Example: Using min-width and max-width

Difficulty: 4/10

Topics: responsive design, media queries, layout

Scenario Questions

0-2 years experience

1
How would you write a media query that switches a two‑column layout on only when the viewport is at least 600 px wide?
2
If you have a container with max-width: 800px and a min-width: 500px media query, what layout will you see when the viewport is 750 px?

2-5 years experience

1
A 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.
2
Why might adding a max‑width breakpoint after a mobile‑first min‑width rule cause unexpected styling on tablet screens?

5-8 years experience

1
We need a fluid grid that works from 320 px up to 1920 px while keeping CSS size low. How would you organize min‑width and max‑width queries to avoid overlap and reduce reflows?
2
A third‑party widget injects fixed‑width CSS that breaks our layout. How could you use min‑width / max‑width media queries to safely contain it without affecting the rest of the page?

8+ years experience

1
Our legacy codebase uses many max‑width (desktop‑first) queries. How would you plan a migration to a mobile‑first, min‑width‑only approach across several teams while keeping the UI stable?
2
Discuss the long‑term maintenance trade‑offs of relying heavily on max‑width breakpoints versus a fluid, min‑width‑only system in a large design system.

Follow-up Questions

❓Can you show the exact CSS syntax for a min‑width and a max‑width media query?
❓How does the order of these queries in the stylesheet affect which rules win?
❓What impact do these breakpoints have on performance or reflow?