Why doesn't the @media query work?

Question

This does not work as I expected. I am testing in a desktop browser (Chrome, Windows 7). Whatever size the browser window have the max-width below is 800px.

What should I do to make it change when the browser window width is less than 1000px?

<html>
  <head>
    <title></title>
    <style type="text/css">
      .flex-container {
          max-width: 800px;
          height: 180px;
          border: red 2px solid;
      }
      @media (max-device-width: 1000px) {
          .flex-container {
              max-width: 400px;
          }
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
    </div>
  </body>
</html>

score 2 · Accepted Answer · answered Dec 31 '13 at 01:16

2

Use max-width, not max-device-width unless you only want it to affect certain small phones and such which have screens smaller than 100px wide

@media (max-width: 1000px) {
    .flex-container {
        max-width: 400px;
    }
}

Demo

For more information and a full list of media features (the stuff in the parenthesis of a media query), check out the Mozilla page

answered Dec 31 '13 at 01:16

Zach Saucier

21,903
12
75
126

There is some background information here, max-device-width takes the screen resolution: http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web – Neograph734 Dec 31 '13 at 01:17
Ah, thanks Zach and Neograph734. Now I feel much less confused. :-) – Leo Dec 31 '13 at 01:33

score 1 · Answer 2 · answered Dec 31 '13 at 01:36

You would never see the changes in desktop, if you use max-device-width. During your development use max-width and for delivering it to customer, change your mediaQueries for smartphone to max-device-width. I suggest leave the tablets mediaQueries to max-width as you can target certain desktop users with smaller screens.

Why doesn't the @media query work?

2 Answers2