title: Simple media query will not resize div or change font in chrome or IE
body: <p>This very simple media query, which I have pared down hoping to find the culprit, the div 'all' will not resize in Chrome or IE. Oddly it works in FF. I have tried every formulation of the actual media query. Any help appreciated.</p>
  
  <p>Here is some of the HTML</p>
  
  <pre><code>&lt;div class="all"&gt;
  Adipiscing accumsan at habitasse pharetra eu a magna sollicitudin ...&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Here is the CSS</p>
  </blockquote>
  
  <pre><code>body {
  
    font-weight: bold;
    font-family: sans-serif;
    font-size: 20px;
    background: white;
  
  }
  
  .all {
  
    width: 200px;
    margin: auto;
    margin-top: 300px;
    background: blue;
  
  }
  
  @media only screen and (max-width: 700px) {
         .all {
          width: 690px;
          font-size: 30px;
      }
  }
  </code></pre>