How CSS Resolves Multiple Matching Breakpoints
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.
All media queries that match the current viewport are applied.
If two or more rules target the same element and property, the one that appears last in the stylesheet wins (cascade rule).
Specificity still applies — more specific selectors override less specific ones even if declared earlier.
In a mobile-first approach using
min-width, larger breakpoints typically override smaller ones because they appear later in the CSS.
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.