Vertical Media Query Not Working

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.

@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;*/
}
  }

You can see the site here http://www.wanderfest.com the media query is at the very bottom

Solution

I'm sure you don't want to hear this, but you definitely need to clean the <head> up. You've got far too many CSS and Javascript links in there.

I'm going to put that down to a development environment though and we'll move quickly on, although it makes it hard to find the media query when there are 28 stylesheets to choose from.

Here's an example which I hope makes you understand the vertical media query: http://codepen.io/justincavery/live/qLJjt

What I'm doing is printing the value of the media query through the :after pseudo element.

.container {
  width: 600px;
  height: 300px;
  margin: 5em auto;
  background: #cc4e46;
  padding: 3em;
  color: #333;
}

.container:after {
        font-size: 2em;

}
@media (max-height:300px) {

  .container:after {
    content: "max-height:300px";

  }

}

@media (min-height:300px) {

  .container:after {
    content: "min-height:300px" ;
  }

}

@media (min-height:400px) and (max-height:600px){

  .container:after {
    content: "(min-height:400px) and (max-height:600px)" 
  }

}

@media (min-height:600px){

  .container:after {
    content: "(min-height:600px)" 
  }

}

You can adjust the height of the browser to see which Media query is being fired. You're media query should be firing when the height of the browser is more than 300px. I'm sorry I can't be more help, but perhaps if you link the page this should be occurring and the CSS file that contains the query I can look into it further (I checked the source for those CSS declarations and couldn't find any of the elements mentioned).