title: responsive layout debugging with chrome device-toolbar and media queries
body: <p>I'm trying to write a login-form for my application with html and css.
  in my css I'm using <code>@media</code>-queries:</p>
  
  <pre><code>@media (max-width: 767px){
      body {
          font-size: 25px;
      }
      ... and some more
  }
  </code></pre>
  
  <p>so in a resolution more than 767px it looks like this:
  <a href="https://i.stack.imgur.com/NRJ5d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NRJ5d.png" alt="enter image description here"></a></p>
  
  <p>when I resize to a resolution lower than 767px it looks like this (all bigger, no box with shadow etc.):
  <a href="https://i.stack.imgur.com/xpOHB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xpOHB.png" alt="enter image description here"></a></p>
  
  <p>then, I change to device view in Google Chrome with
  <a href="https://i.stack.imgur.com/IPMYK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IPMYK.png" alt="enter image description here"></a></p>
  
  <p>I switch to <code>iPhone 5</code> with a resolution of <code>width:320px</code> and <code>height:568px</code>
  and the result looks like this (like the one bigger than 767px):</p>
  
  <p><a href="https://i.stack.imgur.com/uFUNc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFUNc.png" alt="enter image description here"></a></p>
  
  <p>shouldn't it look like the result lower than 767px?</p>