CODEWITHSUNDEEP
cssmedia-queries
trebek1
trebek1

Reputation: 775

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?

Upvotes: 2

Views: 2138

Answers (1)

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

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.

Upvotes: 5

Related Questions