Q:

@media not working below 980px width

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?

A:

Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element

A:

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

