CSS media query not working when resizing browser

Question

I'm trying to use a media query to make a div responsive on a site (using IE11).

This is my CSS:

@media screen and (max-width: 400px) { // Tried with "only screen" also

  .divStyle {
      background-image:none;
      background-color:red;
      background-position:right;
      color:#fff!important;
      height:140px;
      position:relative;
      top:-6px;

    }

}

.divStyle {
  background-image:url('/images/image.jpg');
  background-position:right;
  color:#fff!important;
  padding:20px;
  height:190px;
  position:relative;
  top:-6px;

}

I've also added the metatag in the Head section.

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

But it still doesn't respond when I'm resizing the window.

Answer 1

In your case the rule without the media query follows after the one with the media query. So it overwrites the rule.

Change their order to this.

.divStyle {
  background-image:url('/images/image.jpg');
  background-position:right;
  color:#fff!important;
  padding:20px;
  height:190px;
  position:relative;
  top:-6px;

} 

@media screen and (max-width: 400px) { 
  .divStyle {
      background-image:none;
      background-color:red;
      background-position:right;
      color:#fff!important;
      height:140px;
      position:relative;
      top:-6px;
    }
}