html - CSS media query not working when resizing browser -

i'm trying use media query make div responsive on site (using ie11).

this css:

@media screen , (max-width: 400px) { // tried "only screen"    .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 added metatag in head section.

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

but still doesn't respond when i'm resizing window.

in case rule without media query follows after 1 media query. overwrites rule.

change order this.

.divstyle {   background-image:url('/images/image.jpg');   background-position:right;   color:#fff!important;   padding:20px;   height:190px;   position:relative;   top:-6px;  }   @media screen , (max-width: 400px) {    .divstyle {       background-image:none;       background-color:red;       background-position:right;       color:#fff!important;       height:140px;       position:relative;       top:-6px;     } }