CSS Media Query min-width not working correctly

Question

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?

Leniel Maccaferri · Accepted Answer · 2013-05-21 23:38:35Z

19

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.

edited May 21, 2013 at 23:38

answered May 21, 2013 at 23:32

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Tuan Over a year ago

Damn i was stupid. that tab was at zoom level spent hours on this -_- i should work so late... thanks!

Dylan Hayes Over a year ago

big upvote for @user1974505 I had the same stupid zoom at 110%. As soon as I read it I did a /facepalm and reset to default... works like a charm!

marlar Over a year ago

I had the exact same problem. And yes, the magnifier was on! Didn't know that would affect the reported pixel width of the page.

Tyguy7 Over a year ago

Magnifier fail for me too... :(

khrave Over a year ago

Just have to check in and say that zooming was really wrecking me and I'm sure I wouldn't have seen this on my own, thanks!

|

Zach Parduhn · Accepted Answer · 2017-05-30 17:36:25Z

8

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

answered May 30, 2017 at 17:36

Zach Parduhn

1081 silver badge5 bronze badges

Comments

Victor · Accepted Answer · 2016-10-21 14:14:51Z

1

@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)

answered Oct 21, 2016 at 14:14

Victor

3,7083 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

CSS Media Query min-width not working correctly

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related