I'm trying to understand why the min-width: 600
media query below would overwrite the min-width: 768
media query.
I know that 600px comes later in the CSS file which could be a reason, but surely only one should only be applied if the screen size is either 600 or 768?
I'm looking into media query documentation now, but have yet been able to explain this.
Thanks for any help.
The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration.
Change the maximum width. max-width overrides width , but min-width overrides max-width .
The min-width property defines the minimum width of an element. If the content is smaller than the minimum width, the minimum width will be applied. If the content is larger than the minimum width, the min-width property has no effect.
The min-width and max-width are media features that correspond to a certain media type that has been specified in the media query. The min-width specifies the minimum screen width of a specific device, meanwhile, The max-width media feature states the maximum screen width of a specific device.
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:
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; }
}
Both of yours media query have no below limit. That mean both will be applied to from 0px
to either 600px or 768px
.
So when you are below 600px both will be load but only one will got applied. The order of Media query is the key. The one that after will override the rules before it.
If you want to specific it to be less confusing. Just put the limits/range for it like:
@media (min-width: 600px) and (max-width: 768px){
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With