CODEWITHSUNDEEP
cssmedia-queries
Steve
Steve

Reputation: 14912

CSS3 media query issue

A rule I thought I had set up for only screens between 500px and 1024px is being applied even on screen sizes over 1024px.

Here is the CSS. The .red style is correctly applied on screens less than 480px. It's just the yellow is applied on all screens even those over the max-width of 1024px.

.buy {
    border: 1px solid #ABABAB;
    color: #333333;
    display: block;
    font-family: calibri,helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    width: 70px;
}

@media only screen and (max-width: 480px) {
    .buy {
        color: red;
    }
}

@media screen and (max-width: 1024px) and (min-width: 500px) {
    .buy {
        color: yellow;
    }
}

Upvotes: 2

Views: 104

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

you forgot only

@media only screen and (min-width: 500px) and (max-width: 1024px) {
   .buy {
     color: yellow;
   }
}

Upvotes: 2

Related Questions