CODEWITHSUNDEEP
htmlcssmedia-queries
William
William

Reputation: 1069

Media Query Not setting for right screen resolution

My screen resolution is: 1280 x 768

I have two queries but whatever one is last to activate gets used which is not what i want. The one that gets activated is: 1280 x 720. What i dont get is my screen is 1280 x 768? Why does it not work?

Screen 1280 x 768:

@media only screen 
  and (min-device-height: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: landscape) 
{
body {
        background-color: lightgreen;
    }
}

Screen 1280 x 720:

@media only screen 
  and (min-device-height: 720px)  
  and (max-device-width: 1280px)
  and (orientation: landscape) 
{
body {
        background-color: blue;
    }
}

Upvotes: 1

Views: 972

Answers (1)

Asons
Asons

Reputation: 87191

device-width/device-height has been deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table. Be aware that this feature may cease to work at any time.

In this case, when using min-*, the query with the highest height value needs to be last or else it does not work

And if you use min-height, I guess you'll get the expected result

Note, it's not the computer's screen width that counts, it's the browsers viewport, so if your computer screen is 1280x768 you need to run the browser in full screen for it to work

@media only screen and (min-height: 720px) {
  body {
        background-color: blue;
    }
}
@media only screen and (min-height: 768px) {
  body {
        background-color: lightgreen;
    }
}

If you also want this to only work on screen with a max-width, do like this

@media only screen and (min-height: 720px) and (max-width: 1280px) {
  body {
        background-color: blue;
    }
}
@media only screen and (min-height: 768px) and (max-width: 1280px) {
  body {
        background-color: lightgreen;
    }
}

And of course, limited for landscape will look like this

@media only screen and (min-height: 720px) and (max-width: 1280px) and (orientation: landscape) {
  body {
        background-color: blue;
    }
}
@media only screen and (min-height: 768px) and (max-width: 1280px) and (orientation: landscape) {
  body {
        background-color: lightgreen;
    }
}

Upvotes: 1

Related Questions