CODEWITHSUNDEEP
htmlcssmedia-queries
alonblack
alonblack

Reputation: 955

Media query ignored by by original (higher "query")

screenshot from chrome inspect element

Here is a screenshot from chrome inspect you can see how the small query is deleted:

Upvotes: 0

Views: 39

Answers (1)

Ilmari Karonen
Ilmari Karonen

Reputation: 50328

CSS @media queries don't affect the specificity of selectors. Thus, your two styles have the same specificity (since their actual selectors are identical), and so the last one wins.

In particular, the CSS standard says that:

Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language.

In other words, when you use multiple style sheets on a page, the one that appears last in the HTML code wins.

Given that your two styles are from different style sheets, it appears that newDesignSprites.css comes after smartphone.css in your HTML, and thus ends up overriding it. Simply swapping the order of the <link> elements should fix the problem.

Upvotes: 2

Related Questions