Не могу получить экран @media для работы

Question

Раньше я задавал вопрос о моем профиле, я сказал, что меня не устраивает тот же дизайн на мобильном телефоне, но я передумал, а я использую height:10%; на баннере в основной стиль, но при использовании @media all and (max-width:1024;){} и с тем же классом, но с height:30%; он не изменится. У меня есть другой css, где я делаю то же самое, но там он работает (в большинстве случаев).

HTML:

<?php if($user_visible == 'a'){ ?> 
    <!--Profile picture, banner, and main information--> 
    <div class="profile-wrapper"> 
     <?php if(isset($user_avatar)){ echo'<img class="banner" src="/assets/images/banner/'.$user_banner.'" />'; }else{ echo'<img class="banner" src="/assets/images/banner/default.png" />'; }?> 
     <!--profile picture--> 
     <?php if(isset($user_avatar)){ echo'<img class="avatar" src="/assets/images/users/'.$user_avatar.'" />'; }else{ echo'<img class="avatar" src="/assets/images/users/default.png" />'; }?> 

     <!--user information--> 
     <div class="user-information"> 
     <p><?php echo $user_name; ?><br /> 
     <?php echo $user_firstname; ?>&nbsp;<?php echo $user_lastname; ?></p> 
     </div> 
    </div> 

CSS:

/* ************************************************************************************** 
///////////////////////Main Style//////////////////////////////////////////////////////// 
************************************************************************************** */ 
@media all and (min-width:1024px;) { 
    .avatar { 
     border: 2px solid #fff; 
     border-radius:5px; 

     margin-top:-10%; 
     margin-left: 5%; 

     width:15%; 
     height:auto; 
    } 

    .banner { 
     border: 2px solid #fff; 
     border-radius:5px; 

     margin-top: 20px; 

     height:10%; 
     width:100%; 
    } 

    .profile-wrapper { 
     margin:0 auto; 
     width:90%; 
    } 
} 


/* ************************************************************************************** 
///////////////////////Tablet//////////////////////////////////////////////////////////// 
************************************************************************************** */ 
@media all and (max-width: 1024px) { 
    .banner { height:30%; } 
} 



/* ************************************************************************************** 
///////////////////////Phone///////////////////////////////////////////////////////////// 
************************************************************************************** */ 
@media all and (max-width: 768px) { 
    .banner { height:30%; } 
} 

Answer 1

Эти самые универсальные запросы средств массовой информации там, как они помогут вам охватить большинство различных размеров экрана прилично:

@media(max-width:767px){} 
@media(min-width:768px){} 
@media(min-width:992px){} 
@media(min-width:1200px){} 

Итак, попробуйте эти медиа-запросы для вашего баннера:

@media(min-width:992px){ 
    .banner { 
     height: 30%; 
    } 
} 
      @media(min-width:1200px){ 
      .banner { 
      height: 10%; 
     } 
}