@media screen (min-width:1200px) not working in Chrome

Question

I have a problem in @media screen (min-width:1200px) .

I have set 2 kinds of attributes (classes) for an image and the in the CSS, expecting it to make the image and the "td" in which I put the image smaller when resizing the screen, but when the screen is more than 1200px still it shows the smaller size of the image.

This is the HTML :

 <tr>
     <td class="indexphototd">
         <img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /></td>
     <td>more stuff here</td> 
 </tr>

This is the CSS :

/* for browsers larger than 1200px width */
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}


@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

Answer 1

Your media queries overlap: 1200px is still 800px or larger. Simply reverse your media queries.

@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}

Answer 2

If a screen is say 1400px in width then the 800px will also take effect in your current setup. Swap them around like so:

@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}