title: responsive media query not working
body: <p>I am really sorry if this question has been posted before but I couldnt find an answer, I wrote a very simple css file for two version device tablet and PC , but its not working. Now as you can see i am trying to use between resolution x and y but doesnt seem to be working at all. A bit of help please? Thanks</p>
  
  <pre><code>/* Responsive tablet etc
  -------------------------------------------------------------------------------*/
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 680px) {
  
  #menubar {
      width:100%;
      height:100px;
      display:block;
      position:relative;
      background-color:#000;
      margin:auto;
      padding:0px;
      z-index:100;
  }
  
  #menubarwrap {
      width:980px;
      height:95px;
      margin:auto;
      padding:0px;
      display:block;
      position:relative;
  }
  
  #logo {
      display:inline-block;
      position:relative;
      margin:auto;
      padding:0px;
      width:100px;
      height:95px;
      background-image:url(../img/logo.png);
      background-repeat:no-repeat;
  }
  
  /* Master MENU */
  
  #rightmenu {
      display:inline-block;
      position:relative;
      height:95px;
      width:auto;
      margin:auto;
      padding:0px;
  }
  
  /* Full image */
  
  #banner {
      background-image:url(../img/banner.jpg);
      -webkit-background-size: cover;
      -moz-background-size: cover;
     -o-background-size: cover;
      background-size: cover;
      width:100%;
      height:500px;
      display:block;
      position:relative;
      margin:auto;
      padding:0px;
  }
  
  
  /*wrapper*/
  
  #wrapper {
      display:block;
      position:relative;
      height:auto;
      width:480px;
      margin:auto 10px auto 10px;
      padding:5px;
  }
  
  
  &lt;!-- media tablet end--&gt;
  }
  
  /* Desktop!
  -------------------------------------------------------------------------------*/
  @media only screen and (min-device-width: 681px) and (max-device-width: 1600px) {
  
  #menubar {
      width:100%;
      height:100px;
      display:block;
      position:relative;
      background-color:#000;
      margin:auto;
      padding:0px;
      z-index:100;
  }
  
  #menubarwrap {
      width:980px;
      height:95px;
      margin:auto;
      padding:0px;
      display:block;
      position:relative;
  }
  
  #logo {
      display:inline-block;
      position:relative;
      margin:auto;
      padding:0px;
      width:150px;
      height:95px;
      background-image:url(../img/logo.png);
      background-repeat:no-repeat;
  }
  
  /* Master MENU */
  
  #rightmenu {
      display:inline-block;
      position:relative;
      height:95px;
      width:auto;
      margin:auto;
      padding:0px;
  }
  
  /* Full image */
  
  #banner {
      background-image:url(../img/banner.jpg);
      -webkit-background-size: cover;
      -moz-background-size: cover;
     -o-background-size: cover;
      background-size: cover;
      width:100%;
      height:500px;
      display:block;
      position:relative;
      margin:auto;
      padding:0px;
  }
  
  
  /*wrapper*/
  
  #wrapper {
      display:block;
      position:relative;
      height:auto;
      width:990px;
      margin:auto 10px auto 10px;
      padding:5px;
  }
  
  
  &lt;!-- media PC end--&gt;
  }
  </code></pre>