problema con adaptación

[Zar02]

Hola estaba preparando un diseño en wp para adaptarlo a dispositivos móviles, pero a la hora de probarlo, como que el css en media queries no agarra el css para:

Tableta parada
iPhone acostao y parado

Tengo el siguiente codigo para hacerlo adaptable:

/* For 980px or less */
@media only screen and (max-width: 980px;) {

#wrapper {
width: 70%;
overflow: hidden;
}
#contentwrap {
width: 70%;
overflow: hidden;
}
.postcont { width: 100%;overflow: hidden;}
#side {
width: 30%;
}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

#wrapper {
width:100%;
overflow:hidden;
}

}

/* For 480px or less */
@media only screen and (max-width: 480px;) {

#wrapper {
overflow:hidden;
}
.post { width: 100%;}
#header {width: 20%;}
h1 {background: red;}
.side {display: none;}

}

Ninguno de los códigos lo agarra :(

Además cabe destacar que agregué los siguiente codigos:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<meta content="width=device-width,initial-scale=1" name="viewport">

Y sigue sin funcionar, ojalan me ayuden.