Search code examples
cssmedia-queries

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;
    }
}
Solution

  • You need to switch your values:

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

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