Why do some #media not get read instead of non #media counterpart? - html

Question

I am facing a situation where for one of my classes, the #media query is just not being read, instead, the case where the class is not wrapped around #media query is being read even though the #media criteria is being met.
This is the code:
#media (min-width: 768px){
.buttonClass{
position: absolute;
width: 25%;
}
}
and the class not wrapped in #media:
.buttonClass{
position: absolute;
width: 50%;
}
I know I can solve this problem by specifying an #media query for both the classes with the appropriate resolution, but I just wanted to know why the #media query for screen sizes with widths larger than 768px was not being read.
In another case where I have 2 classes that modify the body and head tags, one of the them is wrapped in #media (width 768px or greater) and the other is not wrapped around anything. So basically it is exactly the same as the one above, expect it involves head/body tags. This seems to work as expected which is what is confusing me.
What do I do when faced with this situation?
Any help would be really appreciated.

Answer 1

#media screen and (min-width: 768px) {
.buttonClass{
position: absolute;
width: 25%;
}
}
Only executes when the viewport is 768px wide or wider, so even if the viewport is 2000px, this code still executes.
If you change the query:
#media screen and (max-width: 1000px) and (min-width: 768px)
This exectues when the browser's width is between from 768 to 1000px.
Are you thinking the opposite?
When none of the #media conditions are met, then css without #media executes:
.buttonClass{
position: absolute;
width: 25%;
}
And btw, i don't know if its just me, but it is very hard to understand your logic....mainly
but I just wanted to know why the #media query for screen sizes with
widths larger than 768px was being read even though the screen size is
larger.
Isn't this suppose to happen?

Answer 2

There are two possible reasons I can think of:
1.) wrong filepath when referencing the CSS file - but that would only apply if you are using more than one CSS file, or one file and the other CSS in a 'style' tag in the header of the HTML page.
2.) The reversed order of the two rules: The media query rule has to be read after the general rule, otherwise the general rule will override the MQ rule since it applies to everything. So if they are both in the same file, the MQ has to be below the general rule, if they are in two sperately referenced files, the file with the MQ has to be referenced after the one with the general rule/s.