Search code examples
cssmedia-queries

CSS media queries, its not changing the properties from 1024 to 768

I am using media queries and it should change color in 1024 view and 768 view but 768 media queries inheriting the properties from 1024.

@media only screen and (max-width: 768px) {

  .cashBalance  {
    font-size: 50px !important; 
    color: green !important;
    margin-left: -20px !important;
  } 
}

@media only screen and (max-width: 1024px) {
  .cashBalance  {
    font-size: 65px; 
    color: red !important;
  }
 }

I am attaching the code pen link. https://codepen.io/SahilKatia/pen/ejqjjJ

Solution

  • Change the order of the mediaqueries, now you are saying that in 1024 the color is green but since it is greater than 768 it is ignoring the other attribut