使用媒体查询隐藏课程

Question

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

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

 <div class="exitpopup-modal-window"> <div class="second"> <img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png"> </div> <div class="first"> <span>We are there to help you</span> <form id="form" name="theform"> <div class="row1"> <input id="name" type="text" placeholder="Your name *" required> <br> <br> </div> <div class="row1"> <input type="email" id="mail" placeholder="Your email *" required> <br> <br> </div> <div class="row1"> <input id="contact" type="number" max="10" placeholder="Your phonenumber*" required> <br> <br> </div> <div class="row1"> <textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea> <br> <br> </div> <div class="row1"> <input id="submit" onclick="myformsubmit()" type="button" value="Submit"> </div> </form> </div> <div class="clearfix"></div> 

Answer 1

You need to specify the width in pixels.

Change the first line to:

@media screen and (max-width: 972px) and (min-width: 100px) {...

Answer 2

Here is a jsfiddle

 @media screen and (max-width: 972px) and (min-width: 100px) 
    {
    .exitpopup-modal-window{
       display:none;
      }
    }