I set up a rule for screens between 500px and 1024px, but it seems to be applied even on screen sizes over 1024px.
Below is the CSS code. The .red style works properly on screens less than 480px, however, the yellow color is being applied to all screens, even those larger than 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;
}
}