CODEWITHSUNDEEP
cssmedia-queries
Leo
Leo

Reputation: 4428

Why doesn't the @media query work?

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>

Upvotes: 0

Views: 130

Answers (2)

negative0
negative0

Reputation: 459

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.

Upvotes: 1

Zach Saucier
Zach Saucier

Reputation: 25934

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

Upvotes: 2

Related Questions