When multiple media queries match the current viewport size, CSS uses the cascade and source order to determine which styles to apply. The last matching rule in the stylesheet (based on order and specificity) takes precedence.

How CSS Chooses Between Multiple Breakpoints

1
All media queries that match the current viewport are applied.
2
If two or more rules target the same element and property, the one that appears last in the stylesheet wins (cascade rule).
3
Specificity still applies — more specific selectors override less specific ones even if declared earlier.
4
In a mobile-first approach using min-width, larger breakpoints typically override smaller ones because they appear later in the CSS.

Example: Overlapping Breakpoints

If the viewport is 1200px wide, both the 768px and 1024px media queries match. Since the 1024px rule appears later, it overrides the previous one and the background becomes light green.

Difficulty: 6/10

Topics: CSS specificity, cascade order, media query precedence

Scenario Questions

0-2 years experience

1
You have two media queries: one for max-width: 768px and another for max-width: 1024px, both setting the sidebar width. The 1024px rule comes after the 768px rule in your CSS file. When viewing the page on a 800px wide screen, which width does the sidebar use? Why?
2
You're building a mobile-first layout and added a media query for min-width: 600px to change the button size. Later, you added another for min-width: 480px to adjust padding. Now the padding isn't changing on a 550px screen. What's likely wrong?

2-5 years experience

1
A feature that worked fine on desktop suddenly broke on tablet — the grid layout isn't responding to the 768px breakpoint anymore. You checked the media queries and they look correct. What would you check next, and why?
2
Your team's CSS uses a mix of mobile-first and desktop-first breakpoints across different components. A designer reports that on a 900px screen, some elements look misaligned. How would you track down which rule is overriding others and how would you fix it without breaking other screens?

5-8 years experience

1
You're designing a responsive component library used across 10+ products. How do you structure your breakpoints and CSS architecture to avoid cascade conflicts when teams override styles, while still allowing flexibility?
2
A legacy app has 50+ media queries scattered across 20 CSS files. Breakpoints are inconsistent — some use px, others use em, and some overlap. How would you refactor this to ensure predictable behavior and reduce technical debt?

8+ years experience

1
You're leading a company-wide UI overhaul and need to standardize breakpoints across 50+ teams. How do you balance consistency with the need for product-specific optimizations, and how do you handle legacy systems that rely on custom breakpoints?
2
Your organization is migrating from a desktop-first to a mobile-first CSS architecture. What are the biggest risks in terms of cascade conflicts and breakpoint precedence, and how would you design a phased rollout strategy to avoid breaking critical user flows?

Follow-up Questions

❓What if you have two media queries with the same width range but different specificity?
❓How would you debug a case where a style isn't applying even though the breakpoint seems to match?
❓Have you ever seen a breakpoint conflict caused by a third-party library?