Search code examples
cssiframeresponsive-designmedia-queries

Declaration is not applied unless "!important" is used

I have a document that is meant to display in an iframe. It needs to be displayed in 2 different sized iframes on my site, and I want to adjust the content accordingly.

In the the framed document, I have a div that's 570px wide. If the iframe is under 400px wide, I want this div to be 285px wide.

So, the CSS in this document has a media query:

@media screen and (max-width: 400px) {
.sub-form {
    width: 285px !important;
   }
}

But it only works if I include the "!important". Why is this?

Solution

  • Two possible reasons why you need to include !important are: 

    .sub-form {
  width: 570px;
}

    appears later on in your CSS file, or the wider width appears earlier but has higher specificity, ie 

    .some-div .sub-form {
  width: 570px;
}

    I'm sure there could be other reasons as well.