CSS media query not working when resizing browser - html

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;
}
}