CSS Media Query Min-Width Not Working Correctly

CSS Media Query min-width not working correctly

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.

media query min-width not working

Try reversing the order of your media queries. The last rule (768px) overrides the others because it is last and has equal precedence to the others.

Media Queries not working properly to change the width

the min-width works if range is outside that specified px value and max-width works for that specified range.

I think it is because you are setting width:60% for both device size.
and you are using max-width:45px property on .calculator class so need to change that property in media query and if you want width of your calculator to fit the width of the display size you can remove that property of max-width.
You should try:
works when size of display is in range of 320px and change width according to your need

@media screen and (max-width: 320px){
  .calculator {
    max-width: 60%;
  }
}

works when size of display is greater than of 320px and change width according to your need

@media screen and(max-width: 320px) {
  .calculator {
    max-width: 60%;
  }
}

media queries in css not working properly

1.) Your third query should be written like this:

@media only screen and (min-width: 600px) and (max-width: 601px) {...

(a comma would mean two independent selectors)

2.) You made your li elements inline elements. But an inline element can't have any padding - all these padding values don't affect anything. So change the display settings to inline-block for these.

Media query min-width not considering devices below a certain width

No matter if you use the mobile-first or desktop-first approach, you need some styles that apply when none of the media queries apply. In your example, there are no styles which apply for widths below 375px. Most likely it would be okay if you simply take the CSS rules you have inside the first query (<375) out of that query and put it at the very beginning of the stylesheet.

Or said differenty: Just erase the @media (min-width: 375px) { at the beginning and its closing } bracket, then those styles will apply to all widths below 768px (also to those narrower than 375px)

min-width in media query is not working as it should be

Don't forget to add the viewport meta tag. Without it devices with high pixel densities, like the iPhone 6 and up, will be rendered differently without accounting for the characteristics of the screen. Those devices tell you that they have a width of 375 pixels, but the actual resolution of the screen is the double of that: 750 pixels. That is because the device has a pixel ratio of 2 or higher. So all the numbers are doubled (or more) in reality.

So your media query sees that the device has 750 pixels in width, but they are rendered in 375 pixels, which is confusing, and therefor will trigger the media query at 700 pixels.

The meta tag here below corrects these values. A more detailed explanation can be found on this article on MDN, which explains why a single pixel is really not a single pixel.

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

Media Queries min-width not firing correctly in Opera, FF and IE

Problem in width of scrollbar in BODY or HTML - it about 16-18px.

What to do?

Bad solution - set to BODY or HTML overflow-y: scroll.
Experimental solution - try to move scrollbar from BODY or HTML to first wrapper DIV.

Like so:

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }

CSS Media Query Min-Width Not Working Correctly