0

screenshot from chrome inspect element

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

alonblack
  • 925
  • 2
  • 13
  • 31
  • There are many factors that may be causing this but you don't provide many details in your question. First and foremost, the screen must be 414px or smaller for the media query to execute. If that's not it, include more info in your question. – Michael Benjamin Apr 03 '16 at 13:33
  • @Michael_B Thank you, well of course the screen was under 414 other then that chrome wouldn't show the 414 query. What more info do I need to add? – alonblack Apr 03 '16 at 13:37
  • Post all CSS which would be impacting the layout. Also post a demo that reproduces the problem (e.g. jsfiddle.net) or a link to the live site, if possible. – Michael Benjamin Apr 03 '16 at 13:42
  • @Michael_B This is part of a system i don't have a permission to publish the code and the specific css contain more than 4k of rows it could be anything... – alonblack Apr 03 '16 at 13:45
  • Check for other code that may be overriding your media query, and also check the order of media queries. The applicable media query that comes last in the code will be used. – Michael Benjamin Apr 03 '16 at 13:54
  • 4
    I think it because you load your `NewDesignSprite.css` after `smartphone.css` isn't it? – Pedram Apr 03 '16 at 14:40

1 Answers1

2

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.

Community
  • 1
  • 1
Ilmari Karonen
  • 49,047
  • 9
  • 93
  • 153