Media Queries - Between Two Widths

Question

I am trying to use CSS3 media queries to create a class that only appears when the width is greater than 400 pixels and less than 900 pixels. I know that this is probably very simple, and I am missing something obvious, but I can not understand it. What I came up with is the code below, appreciate any help.

@media (max-width:400px) and (min-width:900px) { .class { display: none; } } 

Answer 1

You need to switch your values:

 /* No greater than 900px, no less than 400px */ @media (max-width:900px) and (min-width:400px) { .foo { display:none; } }​ 

Demo: http://jsfiddle.net/xf6gA/ (using the background color, so it’s easier to confirm)

Answer 2

@Jonathan Sampson I think your solution is wrong if you use multiple @media .

You should use (min-width first):

 @media screen and (min-width:400px) and (max-width:900px){ ... } 

Answer 3

 .class { display: none; } @media (min-width:400px) and (max-width:900px) { .class { display: block; /* just an example display property */ } }