Why do some @media not get read instead of non @media counterpart?

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?