CSS-Tricks

Forums Get help. Give help.

• fjorko February 22 Permalink

  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 1600x900 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 ?
• cnwtx February 22 Permalink

  It looks fine to me, you might try changing it to 1601px on the first one. I'm not certain that will do it, but it's worth a shot.
• chuckpreslar February 22 Permalink

  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.