@media not working below 980px width

Question

I'm trying to add full responsiveness to my website. But, for some reason, it won't read parts below 980px of width. Here's my CSS:

@media screen and (max-width:1029px){
    h1{
        font-size: 75px;
    }
    h2{
        font-size: 25px;
    }
}
@media screen and (max-width:980px){
    h1{
        font-size: 70px;
    }
    h2{
        font-size: 20px;
    }
}
@media screen and (max-width:954px){
    h1{
        font-size: 65px;
    }
    h2{
        font-size: 15px;
    }
}

The 980px part is the last that can be read, if I change it to 979px it stops reading it, as if it wasn't there. !important doesn't change anything. What can I do? Why is there a magical barrier of 980px?

Answer 1

I think you should realigned your media, it will be work for you may be.

I make a fiddle and it's working as you want with media query

working fiddle

@media screen and (max-width:954px) {
  h1 {
    font-size: 65px;
  }
  h2 {
    font-size: 15px;
  }
}

@media screen and (max-width:1029px) {
  h1 {
    font-size: 75px;
  }
  h2 {
    font-size: 25px;
  }
  @media screen and (max-width:980px) {
    h1 {
      font-size: 70px;
    }
    h2 {
      font-size: 20px;
    }
  }
}