Media Queries - In between two widths


I'm trying to use CSS3 media queries to make a class that only appears when the width is greater than 400px and less than 900px. I know this is probably extremely simple and I am missing something obvious, but I can't figure it out. What I have come up with is the below code, appreciate any help.

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

This question is tagged with css media-queries

~ Asked on 2012-12-23 05:13:34

The Best Answer is


You need to switch your values:

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

Demo: (using background color, so it's easier to confirm)

~ Answered on 2012-12-23 05:19:24


@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){

~ Answered on 2015-01-29 13:53:58

Most Viewed Questions: