title: Media queries don't work in Blogger
body: <p>I have the following media screen queries which work on local browser as xml, but it does not seem to work in blogspot:</p>
  
  <pre><code>/* for 1024px or less */
  @media screen and (max-width: 1024px){
  #wrapper {
  width:100%;
  float:none;
  }
  
  #header-wrapper {
  width:100%;
  }
  
  #navigation {
  width:100%;
  font-size:0.7em;
  }
  
  #content-wrapper{
  width:63.8%;
  float:left;
  }
  
  #sidebar-wrapper{
  margin-left:0.5%;
  width:34%;
  float:left;
  }
  
  #footer-wrapper{
  width:100%;
  float:left;
  }
  }
  
  /* for 700px or less */
  @media screen and (max-width: 700px) {
  #content-wrapper {
  width: auto;
  float: none;
  }
  
  #sidebar-wrapper {
  width: auto;
  float: none;
  }
  }
  </code></pre>
  
  <p>These work on local browser (firefox), but when I implemented them on blogger, the media queries won't work when I tried to change the width of the browser by zooming it out. </p>
  
  <p>I had added the meta viewport code as well, but still not work.</p>
  
  <pre><code>&lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/&gt;
  </code></pre>
  
  <p>Any ideas? great thanks!</p>
  
  <p>*Addition:</p>
  
  <p>This code also resulted broken view:</p>
  
  <pre><code>#navigation{
  background-color: #5F5F5F;
  margin-top: -25px;
  }
  
  #navigation ul{
  margin-left:-40px;
  }
  
  #navigation ul li{
  display:inline-block;
  padding-right: 10px;
  padding-top:10px;
  padding-bottom:10px;
  }
  
  #navigation ul li:hover{
  background-color:#000000;
  }
  
  #navigation ul li a{
  text-decoration:none;
  color:white;
  font-family:calibri;
  padding-left:10px;
  }
  </code></pre>