KPC
Kevin Powell - Community•10mo ago
francis

Media query not working

any one can explain, why it is not working? 
// my styles
.style{
  h1{
    color: blue;
  }
}

// media query not working wihtout !important
@media (max-width:900px) {
    h1{
        color: red;
        // color: red !important;
    }
}
// my styles
.style{
  h1{
    color: blue;
  }
}

// media query not working wihtout !important
@media (max-width:900px) {
    h1{
        color: red;
        // color: red !important;
    }
}
3 Replies
Mannix
Mannix•10mo ago
it doesn't work because of specificity level 🙂 the declaration at the top is 0 1 1 and the declaration in media query is 0 0 1 you can see in dev tools which declaration is winning you either don't nest the h1 at the top or repeat the nesting in media query if you want to fix it
francis
francisOP•10mo ago
can you provide example how to fix it? thank you i get it now
Mannix
Mannix•10mo ago
.style{
  h1{
    color: blue;
  }
}

@media (max-width:900px) {
    .style{
  h1{
    color: red;
  }
}
}
.style{
  h1{
    color: blue;
  }
}

@media (max-width:900px) {
    .style{
  h1{
    color: red;
  }
}
}
or 
  h1{
    color: blue;
  }


@media (max-width:900px) {
    
  h1{
    color: red;
  }

}
  h1{
    color: blue;
  }


@media (max-width:900px) {
    
  h1{
    color: red;
  }

}
:thumbup: nice :thumbup:

Did you find this page helpful?