title: @media screen (min-width:1200px) not working in Chrome
body: <p>I have a problem in <code>@media screen (min-width:1200px)</code>.</p>
  
  <p>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.</p>
  
  <p>This is the HTML :</p>
  
  <pre><code> &lt;tr&gt;
       &lt;td class="indexphototd"&gt;
           &lt;img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /&gt;&lt;/td&gt;
       &lt;td&gt;more stuff here&lt;/td&gt; 
   &lt;/tr&gt;
  </code></pre>
  
  <p>This is the CSS :</p>
  
  <pre><code>/* 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;
        }
  }
  </code></pre>