title: css media query not working with hiding / showing divs
body: <p>Hi I am new to css media queries so please bear with me, but essentially I am trying to hide an element if the screen size is less then 940px wide using css instead of javascript.</p>
  
  <p>For some reason this is hiding the element at all sizes, i can't seem to find a typo or anything, does it not work with display none?</p>
  
  <pre><code>@media all and (min-width: 940px) {
  #smallDistrictMap
  {
      display:none;
  }
  }
  </code></pre>
  
  <p>I noticed it is working if the screen size starts smaller then 940px but not if the screen starts at a larger size...</p>
  
  <p>also tried adding max-width</p>
  
  <pre><code>@media all and (max-width: 2000) and (min-width: 940px) {
  #smallDistrictMap
  {
      display:none;
  }
  }
  </code></pre>
  
  <p>but this is having no effect for some reason. aaaah</p>