The min-width and max-width properties in media queries define the conditions under which certain CSS rules are applied, based on the width of the viewport. They are used to create responsive designs that adapt to different screen sizes.

Key Differences Between min-width and max-width

1
min-width applies styles when the viewport is greater than or equal to a specified width (used in mobile-first design).
2
max-width applies styles when the viewport is less than or equal to a specified width (used in desktop-first design).
3
Using min-width allows styles to build up as screens get larger, while max-width works by removing or overriding styles as screens get smaller.
4
min-width queries are typically written in ascending order, while max-width queries are written in descending order.

Example: min-width vs max-width

In this example, min-width is used to add styles as the viewport expands (mobile-first), while max-width applies styles when the viewport is smaller than the defined width (desktop-first).

Difficulty: 3/10

Topics: media query breakpoints, responsive layout behavior, CSS cascade order

Scenario Questions

0-2 years experience

1
You’re building a card component that should be full-width on mobile but 50% wide on desktop. You used max-width: 768px for the mobile styles, but it’s not working on a 768px tablet—what’s likely wrong?
2
How would you write a media query to show a sidebar only when the screen is wider than 1024px, and hide it otherwise?
3
If you set min-width: 600px and max-width: 800px on the same element, what screen sizes will actually apply those styles?

2-5 years experience

1
A user reports that our product page looks broken on an iPad Pro—everything’s too narrow. You’ve got media queries using max-width, but the device reports a width of 1024px. What’s the most likely cause and how would you fix it?
2
Your team’s responsive grid breaks when resizing between 768px and 1024px because two media queries overlap. How would you diagnose and resolve this without rewriting everything?
3
We’re using max-width for mobile styles and min-width for desktop, but now we need to support foldable phones with weird aspect ratios. What tradeoffs do you consider when switching to min-width-only or fluid breakpoints?

5-8 years experience

1
Our design system has 12 breakpoints across components, and performance is suffering on low-end devices. How would you redesign the media query strategy to reduce repaints and CSS complexity while maintaining responsiveness?
2
You’re inheriting a legacy codebase where min-width and max-width are used inconsistently—some components use mobile-first, others desktop-first. How would you refactor this to improve maintainability and reduce bugs during future updates?
3
A third-party widget breaks our layout on high-DPI screens because it triggers a different media query than our app. How do you isolate and fix this without modifying the widget, and how do you prevent this in future integrations?

8+ years experience

1
We’re migrating from a legacy desktop-first CSS architecture to a mobile-first one across 50+ products. How do you design a phased rollout strategy for media queries that minimizes regressions and aligns with cross-team design systems?
2
Our global product has users on devices with wildly varying viewport widths due to regional device fragmentation. How would you architect a scalable, maintainable responsive strategy that doesn’t rely on fixed breakpoints and can adapt to future form factors?
3
A major partner requires our UI to render identically in a 320px iframe embedded in their app. Our media queries assume full viewport context. How do you solve this without breaking our responsive design elsewhere, and what long-term architectural changes would you propose?

Follow-up Questions

❓What happens if you have both min-width and max-width on the same rule?
❓How would you debug a layout that looks wrong on a tablet but fine on desktop?
❓Why might a mobile-first design prefer min-width over max-width?