CODEWITHSUNDEEP
cssmedia-queries
russellsayshi
russellsayshi

Reputation: 2569

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

Upvotes: 205

Views: 304427

Answers (5)

Bogac
Bogac

Reputation: 3707

As of 2023 we have (in all major browsers) new simpler syntax:

@media (400px <= width <= 900px )  {
  // Styles for viewports between 400px and 900px.
}

Read more about it here

Upvotes: 4

Sampson
Sampson

Reputation: 268344

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)

Upvotes: 374

JasParkety
JasParkety

Reputation: 151

just wanted to leave my .scss example here, I think its kinda best practice, especially I think if you do customization its nice to set the width only once! It is not clever to apply it everywhere, you will increase the human factor exponentially.

Im looking forward for your feedback!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}

Upvotes: 11

Charlie
Charlie

Reputation: 51

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

Upvotes: 5

WalkerNuss
WalkerNuss

Reputation: 465

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

Upvotes: 42

Related Questions