text: Q:
  
  Media queries on internet explorer 11 reading only the first one
  
  I'm trying to make a few @media to work on internet explorer 11
  .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 & 720px */
  @media only screen and (max-width: 960px) {
      .content{
          margin-top: 0px;
          width: 99.6%;
          z-index: 0;
      }
  }
  
  /* Mobile - 480px & 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;
      }
  }
  
  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.
  This only happens with internet explorer. Firefox, chrome, opera, etc.. do work as intended and read the other media queries.
  Am I missing something? How can I fix this? 
  
  A:
  
  You have a syntax error so IE only parses the first query.
  Close your declarations.
  @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;
     }
  }
  
  