CSS Media Query Issue

[fjorko]

I have some media queries based on screen size:

I am currently testing on two different screen sizes ( 1920 x 1080 ) and another ( 1600 x 900 ). The first snippet is not triggered if the page I am viewing is opened on the 1600×900 screen. The query that DOES apply is the second snippet for 1680 x 1050px screens

@media screen and (max-device-width:1600px){



html{

background:lightblue url(../img/logo.png) no-repeat 280px 200px;



}



}

@media screen and (max-device-width:1680px){



html{

background:lightblue url(../img/logo.png) no-repeat 270px 200px;



}



}

Any idea why ?

[chuckpreslar]

Sounds like you’re not reaching the condition for your larger query. Try using only one query with a min-width of 1601, placing the style for the larger resolution inside of it while the smaller needs no condition met to be displayed.

[Author]

Posts