Search code examples
htmlcssmedia-queries

CSS: Multiple `!important` instances on the same Class

I have a, for me, strange situation that I have never came across before.

I have created a class that defines a font-size of 0.8vw
If the screen-size-width is smaller then 750px a new media query is loaded where the font-size is 3.2vw.

Because this is the same class I have to use !important on the 750px query.

Here comes the problem.... If, and there is, there will be another media-query I have to use another !important but as far as I know that won't be possible.

I'm starting to think that I don't fully understand how to use the media-queries in combination with different styles.

Here is an example of how this should go:

@media (max-width: 750px) {
  .header_devider{
    font-size: 3.2vw !important;
  }
}

@media (max-width: 320px) {
  .header_devider{
    font-size: 4vw !important;
  }
}

.header_devider{
    font-size: 0.8vw;
}

<div class="header_devider">
    test content
</div>

Hope somebody can tell me how to fix this.

M.

Solution

  • Declare your media queries after your initial style declaration and it should work:

    .header_devider {
  font-size: 0.8vw;
}

@media (max-width: 750px) {
  .header_devider {
    font-size: 3.2vw;
  }
}

@media (max-width: 320px) {
  .header_devider {
    font-size: 4vw;
  }
}