patel.milanb patel.milanb - 10 months ago 57
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 Source

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