Media queries don't work in Blogger

Question

I have the following media screen queries which work on local browser as xml, but it does not seem to work in blogspot:

/* 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;
}
}

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.

I had added the meta viewport code as well, but still not work.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>

Any ideas? great thanks!

*Addition:

This code also resulted broken view:

#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;
}

Answer 1

Looks like the problem is the comment tag . Maybe blogger doesn't support this comment writing style. Now the problem is solved since I got rid of them!