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.
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) {
}