Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@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

like image 619
patel.milanb Avatar asked Jun 27 '13 13:06

patel.milanb


People also ask

Why media query is not working in mobile?

Mobile Media Query Not Working If your queries are working in a browser but not on mobile, you might have forgotten to set the viewport and default zoom. This tells the browser to render pages according to the width of the device. Adding it often does the trick for making mobile breakpoints work.

Why is @media not working?

Media process errors on Android can be triggered by a long list of factors. For example, maybe you're running low on RAM and storage space. Clear the cache, check for updates, remove the SD card and check if the error is gone. As a last resort, reset your device to factory settings.

Do media queries work on all browsers?

Media Queries Support CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on smartphones and other screen-based devices. Although older versions of IE don't support media queries, still there is a way you can make it work.


1 Answers

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

like image 69
Adam Simpson Avatar answered Nov 09 '22 07:11

Adam Simpson