@media query not working in mobile. Works fine in Chrome

patel.milanb picture patel.milanb · Jun 27, 2013 · Viewed 45.6k times · Source

I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .container .backgroundImage { display: none; }
}

enter image description here

There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help

=============

TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus

Answer

Adam Simpson picture Adam Simpson · Jun 27, 2013

@Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.

Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.