メディアクエリを使用してクラスを呼び出す

Question

私が達成したいのは、画面サイズが972pxに達するとexit-popup-modal-windowがhide.Forであることです。メディアクエリを使用し、最大表示で972pxと最小値100pxディスプレイはnoneに設定されています。まだ隠れていません。 あなたが幅をピクセル単位で指定する必要が

@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

提案してください。

変更への最初の行：

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

Answer 2

はここjsfiddle

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