The min/max-width media query doesn't make grammatical sense
min-width
in media queries is not related to the min-width
property you set on elements, those are two different things.
In media queries min-width: X
is true if the viewport has a width greater or equal to X, effectively working as screen.width >= X
. Obviously max-width
would then be equal to screen.width <= X
To me it makes perfect sense, if you read @media screen and (max-width:420px)
as a screen with a maximum width of 420px, so anything from 0 to 420px
min-width media query always fires while max-width query never fires
I don't see anything wrong with the code you've provided.
My test: https://jsfiddle.net/wp8z9aue/
<h1 id="vision">Test</h1>
#vision {
font-size: 8rem;
}
@media screen and (min-width: 600px) {
#vision {
font-size: 7rem;
}
}
Media Query CSS3 doesn't work for max-width: 420px
It sounds like you're calling a max-width:992px
media query after your max-width:420px
media query is defined. Keep in mind CSS is compiled top-down, and your logic needs to accommodate this. Instead, consider your media query order:
@media (max-width:992px) {
...
}
@media (max-width:420px) {
...
}
Why does a media query with a smaller min-width overwrite a larger one?
I know that 600px comes later in the CSS file which could be a reason
This is usually the reason, aside from unrelated authoring mistakes or, worse, browser bugs. Anything that is greater than or equal to 768px is, by necessity, also greater than or equal to 600px, so they both have to match.
See the following related questions for more information:
- Why does the order of media queries matter in CSS?
- What are the rules for CSS media query overlap?
- CSS specificity, Media Queries and min-width
but surely only one should only be applied if the screen size is either 600 or 768?
That's not true; @media
rules are completely independent of one another. It doesn't make sense for @media
rules to be exclusive, in particular when you consider that media queries can consist of any combination of media features.
For example, what should happen in this case when the media is (width: 600px) and (height: 300px)
? (The correct behavior is that every rule is applied, with the last one taking precedence, because there is no other way for the UA to account for both width
and height
when evaluating the queries.)
@media {
body { background-color: white; }
}
@media (min-width: 600px) {
body { background-color: red; }
}
@media (min-width: 300px) and (max-height: 300px) {
body { background-color: yellow; }
}
@media (max-height: 600px) {
body { background-color: blue; }
}
How to combine min-width and max-width in one media query
You can combine two media queries in one, like this:
@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
display: none !important;
}
}
EDIT This will hide .show-sm-only
on screen smaller than (max-width) 544px and on screen bigger than (min-width) 767px.
Related Topics
CSS3 Transforms and Transitions (Webkit)
How to Style a Django Form - Bootstrap
Resizing Buttons in Twitter-Bootstrap
Em Vs Px... for Mobile Browsers
Divide Width of Element Between Child Divs with CSS
How to Enlarge The Svg Icon in Material-Ui Iconbuttons
How to Let a Div Automatically Set It Own Width
Chrome Devtools Converts All Hex Colors to Rgb
Two Divs Inside Div. How to Auto-Fill The Space of Parent Div by Second Div
Input[Type='Text'] CSS Selector Does Not Apply to Default-Type Text Inputs
How to Remove Unused Styles from Twitter Bootstrap
What Is The Replacement for The Child Selector
Position: Relative Appearing Over Position:Absolute
What Does The 'P-N' and Its Variants Represent in Bootstrap V4
Pace.Js "Hide Everything But Pace Until The Page Has Fully Loaded" Local Copy
Using Proper CSS Media Queries in Angular
Using an Icon Font (Font Awesome) Looks a Little Blurred and Too Bold