title: HIde a class using media query
body: <p>What i want to achieve is that when the screen size reaches to the 972px the exit-popup-modal-window should hide.For that i have used media query and at maximum display of 972px and minimum 100px the display is set to none.Still it is not hiding.
  please suggest </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 972px) and (min-width: 100x) {
    .exitpopup-modal-window {
      display: none;
    }
  }
  #exitpopup-modal .modal-body {
    padding: 0px;
  }
  .modal-body {
    padding: 0px;
  }
  .second img {
    width: 369px;
    height: 404.6px;
    margin-top: -1%;
  }
  .first form {
    display: table;
    margin-left: 34px;
    margin-top: 43px;
  }
  .row1 {
    font-size: 10px;
    font-family: inherit;
    display: table-row;
    border: 2px solid red;
  }
  .row1 #name,
  #mail,
  #contact {
    color: black;
    width: 260px;
    height: 34px;
    padding: 6px 12px;
    border-radius: 3.9px;
    border-color: #777;
    display: table-cell;
  }
  .row1 textarea {
    width: 260px;
    height: 110px;
    color: black;
    border-color: #777;
    display: table-cell;
  }
  .row1 #submit {
    width: 152px;
    height: 44px;
    margin-left: 15%;
    background-color: #337ab7;
    color: white;
    border-color: none;
  }
  .row1 #submit:hover {
    width: 152px;
    height: 44px;
    margin-left: 15%;
    background-color: white;
    color: #337ab7;
    border-color: none;
  }
  .second,
  .first {
    float: left;
  }
  .clearfix {
    clear: both
  }
  .first span {
    margin-left: 25%;
    font-family: inherit;
    font-size: 15px;
    padding-top: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="exitpopup-modal-window"&gt;
    &lt;div class="second"&gt;
      &lt;img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png"&gt;
    &lt;/div&gt;
    &lt;div class="first"&gt;
      &lt;span&gt;We are there to help you&lt;/span&gt;
      &lt;form id="form" name="theform"&gt;
        &lt;div class="row1"&gt;
          &lt;input id="name" type="text" placeholder="Your name *" required&gt;
          &lt;br&gt;
          &lt;br&gt;
        &lt;/div&gt;
        &lt;div class="row1"&gt;
          &lt;input type="email" id="mail" placeholder="Your email *" required&gt;
          &lt;br&gt;
          &lt;br&gt;
        &lt;/div&gt;
        &lt;div class="row1"&gt;
          &lt;input id="contact" type="number" max="10" placeholder="Your  phonenumber*" required&gt;
          &lt;br&gt;
          &lt;br&gt;
        &lt;/div&gt;
        &lt;div class="row1"&gt;
          &lt;textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required&gt;&lt;/textarea&gt;
          &lt;br&gt;
          &lt;br&gt;
        &lt;/div&gt;
        &lt;div class="row1"&gt;
          &lt;input id="submit" onclick="myformsubmit()" type="button" value="Submit"&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>