title: Media queries on internet explorer 11 reading only the first one
body: <p>I'm trying to make a few @media to work on internet explorer 11</p>
  
  <pre><code>.content {
      border-top: 1px solid #939393;
      border-right: 1px solid #939393;
      border-left: 1px solid #939393;
      border-bottom: none;
      margin-top: -60px;
      position: relative;
      width: 99.7%;
      z-index: 97;
  }
  
  @media only screen and (max-width: 1330px) {
      .content{
          width: 99.6%;
          z-index: 0;
  }
  
  @media only screen and (max-width: 1200px) {
      .content{
          margin-top: 0px;
          width: 99.6%;
          z-index: 0;
  }
  
  /* Tablet - 800px, 768px &amp; 720px */
  @media only screen and (max-width: 960px) {
      .content{
          margin-top: 0px;
          width: 99.6%;
          z-index: 0;
      }
  }
  
  
  /* Mobile - 480px &amp; 320px */
  @media only screen and (max-width: 719px) {
      .content{
          margin-top: 0px;
          width: 99.45%;
          z-index: 0;
      }
  }
  
  
  /* Mobile - 320px */
  @media only screen and (max-width: 479px) {
      .content{
          margin-top: 0px;
          width: 100%;
          z-index: 0;
      }
  }
  </code></pre>
  
  <p>Internet explorer 11 is only reading the first media query which is max-width: 1330px even if I reduce the screen width to a minimum.</p>
  
  <p>This only happens with internet explorer. Firefox, chrome, opera, etc.. do work as intended and read the other media queries.</p>
  
  <p>Am I missing something? How can I fix this? </p>