Why Your Media Query Isn't Working: Same-Specificity Rules Written After @media(max-width:900px) Override It
機械翻訳 / Machine-translated
1日前・3分で読める
機械翻訳 / Machine-translated
A pricing column that should have collapsed to a single column on mobile kept breaking characters into a vertical stack one by one when the viewport was narrowed. The cause: a CSS rule with the same specificity as the one inside the @media block was written after it in the source, so the "last rule wins" behavior in CSS silently overrode the entire @media declaration. Moving the @media block to the end of <style> fixed it immediately — a real-world example.
When CSS specificity is equal, it makes no difference whether a rule is written inside or outside an @media block — whichever appears later in the source code wins outright. The actual problem occurred in a component that laid out pricing-section heading labels as "two columns on desktop, one column on mobile." The one-column rule for mobile was written inside @media (max-width: 900px), but a base rule using the same selector and the same specificity (the two-column declaration) was placed further down in the file. As a result, even on a narrow mobile screen the layout rendered as two columns, squeezing the heading text into such a tight space that each character broke onto its own line. The fix was simply to move the @media block to the very end of <style> — after all base rules — without changing a single CSS value.
A detailed walkthrough, how to verify the issue, and frequently asked questions are covered in the original article.