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; } }
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
=============
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.
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.
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.
@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">
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With