patel.milanb patel.milanb - 13 days ago 8
CSS Question

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

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

@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">.