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 related to
css
media-queries
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;
}
}
@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){
...
}
.class {_x000D_
display: none;_x000D_
}_x000D_
@media (min-width:400px) and (max-width:900px) {_x000D_
.class {_x000D_
display: block; /* just an example display property */_x000D_
}_x000D_
}
_x000D_
Source: Stackoverflow.com