CODEWITHSUNDEEP
cssresponsive-designmedia-queries
repoman84
repoman84

Reputation: 3

Not reading all media query

I have the following CSS in my stylesheet:

@media only screen and (max-width: 420px) {
    .entry-title, .entry-title a {
        font-size: 24px;
    }
    a.more-link {
        width: 44%;
    }
    .entry-title, .entry-header .entry-meta {
        padding-right: 10px;
    }
} 

@media only screen and (min-width: 350px) and (max-width: 380px) {
    .entry-title, .entry-title a {
        font-size: 24px;
    }
    a.more.link {
        width: 45%;
    }
    .entry-title, .entry-header .entry-meta {
        padding-right: 10px;
    }
}

@media only screen and (max-width: 330px) {
    .entry-title, .entry-title a {
        font-size: 24px;
    }
    a.more-link {
        width: 52%;
    }
    .entry-title, .entry-header .entry-meta {    
        padding-right: 10px;
    }

}

When I go to test the middle query (max-width: 380px) it isn't being read by the browser. Instead its reading the first query (max-width: 420px). If I remove the fist media query, it then the browser only reads the last media query (max-width: 330px).

I also have this in the header.php file:

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

Upvotes: 0

Views: 108

Answers (2)

Johannes
Johannes

Reputation: 67776

You have a typo in the second one: Should be a.more-link instead of a.more.link

Upvotes: 2

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

Try to change first media query with 

@media only screen and (max-width: 420px) and (min-width: 380px)

Upvotes: 0

Related Questions