Media Queries not respecting size

I was curious what was going wrong here with my media queries. I just want one style for 'reasonably small screens' and one style for 'reasonably large screens'. So I did the following:

@media (min-width: 501px) {
    #courtName {
        font-size: 17px;
    }
    #courtInfoWindow {
        font-size: 13px;
    }
}

@media (max-width:500px) {
    #courtName {
        font-size: 64px;
    }
    #courtInfoWindow {
        font-size: 40px;
    }
}

I would expect the min width size to show on 'large screens' and the max width size to show on small screens (less than 500px). Yet, the smaller size is shown on all screen sizes. I've tried using just one media query to override a default size. Tried switching the order. Nothing is working. What gives?

Solution

before starting make sure you have following view port meta in your head section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

After this please note following

@media (min-width: 501px) { /** CSS HERE **/ } This will work only on screen size larger than 501 pixels wide.

@media (max-width: 500px) This will work only on screen sizes smaller than 500 pixels wide.