CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Olga
Olga

Reputation: 443

@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?

Upvotes: 4

Views: 3623

Answers (2)

Boryana Krizhanovska
Boryana Krizhanovska

Reputation: 151

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

Upvotes: 15

LKG
LKG

Reputation: 4192

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

Upvotes: 2

Related Questions