CODEWITHSUNDEEP
cssmedia-queries
Tuan
Tuan

Reputation: 952

CSS Media Query min-width not working correctly

I have a HTML like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

and my CSS is:

input {
  background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    input {
        background-color: green;
    } 
}

now the CSS applies when the window is at 909px width. Obviously not a scrollbar problem. I am getting nuts with this simple problem. I tested it with Chrome and IE10 both the same.

Can anybody please help what I am doing wrong here?

Upvotes: 14

Views: 40836

Answers (3)

Zach Parduhn
Zach Parduhn

Reputation: 108

I have had this happen to me from time to time. Make sure your tab is not zoomed in (⌘0)

Upvotes: 8

Victor
Victor

Reputation: 3698

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

This works, but make sure you check the zooming. (I got this answer from the comments, as it seems this is the big catch around here.. I fell for it too)

Upvotes: 1

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102448

I used this HTML:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

With a simpler media query declaration like this one:

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

It's working great here: http://jsbin.com/ubehoy/1

Debugging with Firefox Responsive Design View and dragging the resizer, it changes the input background color correctly when the width limits are reached.

Tried with Chrome 26.0.1410.64 m/IE 10 and it's working great too.

Upvotes: 19

Related Questions