0

Right now I am using a screen resolution of 3840x2160 and zoomed in at 250%, when I run document.documentElement.clientHeight it returns 713. So I wrote a media query to work with this, and that media query is @media (max-height: 713px){...} but that media query is getting overridden by this media query @media (max-height: 754px){...} and I have no idea why this is happening

Chris
  • 2,953
  • 10
  • 48
  • 118
  • 1
    When you're using two `max` media queries, they have to be placed from largest first down to the smallest. – MattHamer5 Mar 05 '20 at 15:12
  • 2
    Styles will apply for 754 and under, so if your rules are the same specificity and the 754 one comes after the 713 one, then it will override it – Huangism Mar 05 '20 at 15:13
  • 1
    Does this answer your question? [Media Queries overriding each other](https://stackoverflow.com/questions/41620499/media-queries-overriding-each-other) – MattHamer5 Mar 05 '20 at 15:14
  • Thanks for the answer everyone on the order of the media queries, my 754 was after my 713. I moved the 754 over my 713 and it worked. I've made a mental note on the answer – Chris Mar 05 '20 at 15:18

1 Answers1

0

Perhaps the fact that your 754px media queries is declared after the 713px one is the problem ? In CSS, the last declaration always win (considering the selector is the same)

In order to see which CSS property is currently applied on an element, you can use your browser developer tools

Oddrigue
  • 554
  • 5
  • 17