CODEWITHSUNDEEP
htmlcssxhtml
Glen
Glen

Reputation: 695

Responsive CSS Not Working

Here is my css, as a test:

*{margin:0;padding:0;outline:0;border:0;}

body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
@media screen and (max-device-width:320px){
    body{background:red !important;}
}

@media screen and (max-device-width:800px){
    body{background:organge !important;}
}

I have 2 android devices running using the SDK to test this. One is 3.2 inch HVGA Slider 320x480, and the first rule picks up on this device and sets the body background to red. The second device is Nexus 7 800x1280, but this one ignores both of the media rules; however if i delete the first media rule then it picks it up. Why??

Upvotes: 0

Views: 10692

Answers (2)

Kesar Sisodiya
Kesar Sisodiya

Reputation: 1624

Have you put this link in your html file:-

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

you can use-

@media only screen and (max-width:800px){ }

instead of-

@media screen and (max-device-width:800px){ }

Upvotes: 9

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Replace into this 

*{margin:0;padding:0;outline:0;border:0;}

body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
@media screen and (max-device-width:320px){
    body{background:red !important;}
}

@media screen and (max-device-width:800px){
    body{background:organge !important;}
}

this 

*{margin:0;padding:0;outline:0;border:0;}

body{background:#fcfcfc;font-family:Arial,Verdana,sans-serif;font-size:100%;}


@media screen and (max-device-width:800px){
    body{background:orange;}
}

@media screen and (max-device-width:320px){
    body{background:red ;}
}

More about media query-1

Media query-2

Upvotes: 0

Related Questions