Non-matching media query overriding default styles - css

Question

I have looked at similar questions here and did not find a suitable answer, so forgive me that this question may appear at first to be a duplicate of others here.
My screen resolution is 1366px wide
I have default styles, and then several media queries at the end of the stylesheet, in the following order:
#media only screen and (max-width:1920px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
On my machine, the styles from the very first media query (max-width: 1920px) are being applied. When I inspect in Firebug, it gives me the line # coinciding with a declaration within that first media query.
This is happening across several browsers (Firefox, Chrome)
But, my viewport is just 1366px wide - so, I would expect either max-width:1280px or max-width:1680px to match, and not 1920px.
When I resize to 1024x768, or 800x600, the correct media query styles are applied.
What am I doing wrong?
I've looked for any missing bracket closures and found none. I've validated using the W3C CSS validator service, and checked as Correct, no errors found.

Answer 1

The issue is your logic.
Your first query states max-width: 1920px. Indeed, because your desktop is at 1366px, it is smaller than 1920px, so it is a valid query. Consider this a catch all after your 1680px.
I would suggest re-ordering and starting with smallest, most constraining queries first:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1920px) {
}
An even better approach would be to use min-width for all of your queries:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (min-width: 800px), only screen and (min-device-width: 800px) {
}
#media only screen and (min-width:1024px), only screen and (min-device-width: 1024px) {
}
#media only screen and (min-width:1280px), only screen and (min-device-width: 1280px) {
}
#media only screen and (min-width:1680px), only screen and (min-device-width: 1680px) {
}
#media only screen and (min-width:1920px) {
}
As a best practice, here is Bootstraps queries:
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}

Answer 2

You want to use min-width not max-width. Since you're query is applying to any screen up to 1920px wide, it is always being applied when your screen is no larger than 1366px wide. max-width == <=, min-width == >=.
/* apply these selectors when the width is equal to or greater than 1920px */
#media only screen and (min-width:1920px) {
}