Question

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;
    }
}

Answer 1

you forgot only

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