Applying Styles in media queries which has same width but different height - html

Question

So I am facing problem with where I have 2 different mediaqueries where the width is same for each but the height is different like this:
#media only screen and (max-width:1920px) and (min-height:1080px){
#home{
height:1080px;
}
}
#media only screen and (max-width:1920px) and (min-height:1200px){
#home{
height:1200px;
}
}
But what happens is that when I change the screen dimensions to 1920px width with 1200px height it seems that this media query is not overriding the other one with a height of 1080px. For now I am stuck here and cant figure out the mistake I made. Whats the issue here ? Where am I going wrong ? what is the solution to this problem ? Thanks for your help !

Answer 1

The world 'screen' in the media queries is a little bit confusing. The actual meaning of it is not the computer screen resolution but the actual internal size of the browser window. Even when the window is maximized, to compute the actual height you should discount from the screen height the browser window caption address bar, system tray, etc., so if the screen resolution is 1200px then media query screen size will be something about 1180px.
The following code sample illustrates the concept. See it in full screen mode, try to resize the browser window and see how the color changes:
body{
background-color: yellow;
}
#media only screen and (max-width:1920px) and (min-height:500px){
body{
background-color: lime;
}
}
#media only screen and (max-width:1920px) and (min-height:800px){
body{
background-color: red;
}
}