Media Queries - In between two widths

css media-queries
russellsayshi picture russellsayshi · Dec 23, 2012 · Viewed 188k times · Source

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

Answer

Sampson picture Sampson · Dec 23, 2012

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 background color, so it's easier to confirm)

Related questions

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More
Twitter Bootstrap 3: how to use media queries?

I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?

Read More