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•8mo 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

francisOP•8mo ago

can you provide example how to fix it? thank you i get it now

Mannix•8mo 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;
  }
}
}

  h1{
    color: blue;
  }


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

}

  h1{
    color: blue;
  }


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

}

:thumbup: nice :thumbup:

Gaming

Programming

Media query not working