CSS Media Query strange overiding issue

[afridy]

Hi guys,

why is first media query is firing while it should fire the second one?

/* width 1280-1920 */
@media screen and (min-width: 1280px) and (max-width: 1919px) {
	
.wd-slide-bg{
	background-size: 100% 630px !important;
	background-position: top center !important;		
}	
	
#slider_col_left_antler {
    background-size: 100% 632px !important;
    background-position: top center !important;
}
	
}

/*width 1280-1920 and height 900*/
@media screen and (min-width: 1280px) and (max-width: 1919px) and (min-height: 900px) and (max-height: 900px) {
	
.wd-slide-bg{
	background-size: 100% 500px !important;
	background-position: top center !important;		
}	
	
#slider_col_left_antler {
    background-size: 100% 500px !important;
    background-position: top center !important;
}
	
}

Chrome Inspect

[DaveMaxwell]

#1, doing queries by width AND height is a really bad idea. Pixel perfection is not possible in the web.
#2, if you’re being forced to use !important in a media query, you’re probably doing something wrong. !important should be a weapon of last resort and used sparingly if not at all…

But your second query is looking for EXACTLY 900px tall (you have min and max set to the same height) which you probably aren’t hitting.

[afridy]

@DaveMaxwell

But your second query is looking for EXACTLY 900px tall (you have min and max set to the same height) which you probably aren’t hitting.

Thanks for the reply.

BlockquoteBut your second query is looking for EXACTLY 900px tall (you have min and max set to the same height) which you probably aren’t hitting.

so you mean even thought screen resolution is set to 900px height, it is not 900px height in real? if so how do i the actual height then? is there an option in chrome to find that?

[afridy]

i am sorry, i think my screen shot of computer screen display was wrong. it is not showing 900 height but 1024. . please allow me to correct it. but i am sure i was really testing at 900 height only before writing this.

[PaulOB]

@afridy

so you mean even thought screen resolution is set to 900px height, it is not 900px height in real? if so how do i the actual height then? is there an option in chrome to find that?

No, my screen resolution is 1080px but in Chrome the max height available is only 927px. In Firefox its different and in every other browser its different. It all depends whether you have your address bar shown your, favourites shown or your history panel shown or you have tweaked the customised your browser look… Its different on my mac computer also because it hides the scrollbars until in use so you get another swathe of different heights. Also I never ever have my browser maximised to I would never be a target for any of your media queries. You would need about 1000 media queries using your approach

If you read my previous post you will see why this is the wrong approach. You cannot code for sites in that way unless its just for you on your own computer. I’ve coded over a 1000 sites in the last 20 years and never needed to go to those extents.

Forget about devices and concentrate on the needs of the design. Just open your browser window as wide as it will go and then slowly close it a pixel at a time. At some point the design will break and that’s the point you should look at adding a media query. If you have designed fluidly to start with then you only need a handful of media queries to design for every device now and in the future. Chasing device and screen sizes is not the way to accomplish a fluid design. You need to be device agnostic and concentrate on the needs of the design.

[afridy]

Thank you for the nice explnation.