title: CSS media queries for width or height
body: <p>I placed a logo in the center of a full-screen-page.</p>
  
  <pre><code>img.logo {
          width: 920px;
          height: 552px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -460px;
          margin-top: -276px;
      }
  </code></pre>
  
  <p>This is working fine.
  Now i want different sizes on different device heights and widths so i tried using media queries.</p>
  
  <pre><code>@media (max-width: 991px), (max-height: 460px) {
      img.logo {
          width: 235px;
          height: 141px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -117px;
          margin-top: -70px;
      }   
  }
  @media (min-width: 992px) and (max-width: 1199px), (min-height: 300px) and (max-height: 649px) {
      img.logo {
          width: 533px;
          height: 320px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -276px;
          margin-top: -160px;
      }   
  }
  @media (min-width: 1200px), (min-height: 650px) { 
      img.logo {
          width: 920px;
          height: 552px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -460px;
          margin-top: -276px;
      }
  }
  </code></pre>
  
  <p>But this still works if both parameters are changing at the same time.
  I want it separated, so you can change the browser height and the image size changes OR the browser width OR both.</p>
  
  <p>The image (the logo) should always stay in the middle of the page.</p>