title: Vertical Media Query Not Working
body: <p>My screen resolution is 1240x768 but the only media query that detects in my browser is when I set the min height to 300px, the query seems to have no effect if I set it to anything greater than 300px. This makes no sense because my browser window is 768px in height.</p>
  
  <pre><code>@media only screen and (min-height:300px)  {
    .wanderfest #map-1-container {
      height: 768px;
      overflow: hidden !important;
      position: relative;
      width : 1560px;
  }
  
  .map-viewport {
      border: 1px solid black;
      /*height: 1170px;*/
      margin: 0 0 20px;
      overflow: hidden;
      position: relative;
      /*width: 1350px;*/
      height : 768px;
      width : 1560px;
  }
  
  
  /*map size*/
  #map-1 {
      cursor: move;
      width: 2146px;
    height: 1170px;   
      position: absolute;
      left: -275px;
      /*top: -33px;*/
  }
    }
  </code></pre>
  
  <p>You can see the site here <a href="http://www.wanderfest.com" rel="nofollow">http://www.wanderfest.com</a> the media query is at the very bottom</p>