CSS media query order issue - html

Question

I am updating a text element which ID has if7ou.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view.
So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.
#media (max-width: 480px) {
#if70u {
font-size: 20px;
}
}
#media (max-width: 992px) {
#if70u {
font-size: 40px;
}
}
I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!

Answer 1

I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.
#if70u {
font-size: 20px;
}
#media (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.

Answer 2

In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:
#if70u{
font-size: 14px; //Its apply for mobile
}
#media screen and (min-width: 768px){
#if70u{
font-size: 16px; //Its apply for tablets
}
}
#media screen and (min-width: 992px){
#if70u{
font-size: 18px; //Its apply for small desktop screens
}
}
#media screen and (min-width: 1200px){
#if70u{
font-size: 20px; //Its apply for large desktop screens
}
}

Answer 3

In addition to #S. Dunn answer.
If you want to set a style to specific minumum and maximum width you can use this:
#media only screen and (max-width: XXXpx) and (min-width: XXXpx)
So in your case it would be:
#if70u {
font-size: 20px;
}
#media only screen and (max-width: 992px) and (min-width: 481px) {
#if70u {
font-size: 40px;
}
}