Cant get #media screen to work - html

Question

Earlier I asked question about my profile design, I am said I was not gone use the same design on mobile phone but I've changed my mind, howere i use height:10%; on the banner in the main style but when using #media all and (max-width:1024;){} and having same class but with height:30%; it wont change. I have a different css where I do the same thing but there it works (most of the times).
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; ?> <?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

These are the most universal media queries out there as they will help you to cover most of the different screen sizes decently:
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
So try these media queries for your banner:
#media(min-width:992px){
.banner {
height: 30%;
}
}
#media(min-width:1200px){
.banner {
height: 10%;
}
}