55

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

patel.milanb
  • 5,822
  • 15
  • 56
  • 92
  • 2
    Depending on your iPhone version, it may have a max-device-width wider than 480. Try `900` or something silly to make sure they are working. also there should be an `and` between the 2 rule sets – Andy Jun 27 '13 at 13:22
  • not working.... is it possible that the device i am testing on has ratina display and thats why its not working.. – patel.milanb Jun 27 '13 at 13:28
  • 1
    Use width in em and not pixels ans try. – Madanlal Arora Jun 27 '13 at 13:38

4 Answers4

177

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

Adam Simpson
  • 3,591
  • 2
  • 22
  • 27
37

Fantastic - forgot the viewport too! Fot all: Just add

<meta name="viewport" content="width=device-width,initial-scale=1.0">

in your head

romedius33
  • 371
  • 3
  • 2
4

I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.

Pops Jones
  • 113
  • 5
4

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

Thus this worked for me:

<meta name="viewport" content="width=device-width,initial-scale=1.0">
ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
evasharma12
  • 91
  • 2