Media queries are replacing another media queries

Question

I have a few media queries, but one replace my class properties of the other. For example, when i am on 1024 px width it show this:

@media (min-width: 1024px)
.box:hover .overlay {
  opacity: 1;
  top: -7em !important;
  left: 44%;
}

And i have another class for 1366px:

@media (min-width: 1366px)
.box:hover .overlay {
  opacity: 1;
  top: -8em !important;
  left: 44%;
}

But when i am on 1366, the class of 1024 is still active, replacing the 1366 class styles (So, it add top: -7em instead top: -8em). How can i fix it?

Answer 1

Try this:

@media (min-width:1024px) and (max-width: 1365px)
  .box:hover .overlay {
    opacity: 1;
    top: -8em !important;
    left: 44%;
  }  

@media (min-width: 1366px)
.box:hover .overlay {
  opacity: 1;
  top: -8em !important;
  left: 44%;
}