Menu
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?
422
Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element
141
answered Sep 06 '25 04:09
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;
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
