Divブラウザのウィンドウを最小化するときに隠れる

Question

Container Divに基づいて "Call to Action Box" divを整列しました。通常のブラウザビューでは正しく整列されていますが、問題はあります。ユーザーに表示されます。

<div class="container"> 
<div class="PosRel"> 
      <div class="PosAbsol"> 
       <div class="MsgContainer"> 
          <div class="MsgDisplay">Call To Action</div> 
       </div> 
      </div> 
     </div> 
</div> 

CSS：

.container { 
    width: 100%; 
    margin: 0 auto; 
    vertical-align: top; 
    text-align: center; 
    font-size: 0; 
    position: relative; 
} 

.PosRel { 
    position: relative; 
} 

.PosAbsol { 
    position: absolute; 
    right: 0; 
} 

.MsgContainer { 
    position: fixed; 
    z-index: 9999; 
    opacity: 0; 
    transform: translateZ(0px); 
    transition: all 2s linear; 
} 

.MsgDisplay { 
    margin: 0px; 
    width: 200px; 
    height: 58px; 
    background-size: 100% 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: normal; 
    color: rgb(241, 241, 241); 
    text-decoration: none; 
    word-wrap: break-word; 
    z-index: 9999; 
    padding: 18px 15px; 
    font-weight: 600; 
    position: absolute; 
    right: 10px; 
} 

Answer 1

は、あなたがこれをしたいです：）

@media only screen and (max-width:1230px) and (min-width:990px){ 
// CSS code 
} 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
// CSS code 
} 
@media only screen and (max-width: 479px) { 
// CSS code 
}