How to make nivo slider mobile friendly?

Question

Hello I have one Nivo slider setting question . Currently I have one challenge and can not find the right solution -- trying to make webpage mobile friendly , auto resize image when I view it on mobile device.

here is my code and what I have tried , but still not having the right outcome as I want. does anyone can help me on this? not sure which part I did wrong.

<div id="banner_image">   
<div id="slider-wrapper">        
<div id="slider" class="nivoSlider">
<img class="innerimage" src="image/1.jpg" alt=""/>
<img class="innerimage"  src="image/2.jpg" alt=""/>
<img class="innerimage"  src="image/3.jpg" alt=""/>
</div>  
</div>  
</div> 

my CSS :

#banner_image {
width: 1024px;
height: 531px;
float: left;
margin-left: 10px;  
padding: 0 0 0 0;}


#slider-wrapper {
width: 1024px;
height: 531px;
background: transparent;}

#slider {
background: url("../image/loading.gif") no-repeat scroll 50% 50% transparent;
width: 920px;
height: 400px;
position: relative;}

#slider img {
display: none;
left: 0;
position: absolute;
top: 0;}

I googled and tried below changes but the image still not able to resize on mobile screen. It's appreciate if anyone would help me to understand what I did wrong. thanks

<!--trying 1 -->
#banner_image, #slider-wrapper, .nivoSlide img{
width:100%; 
height:auto;}
 <!--trying 2 -->
<img class="innerimage"  src="image/1.jpg" width="1024px" alt=""/>
<img class="innerimage"  src="image/2.jpg" width="1024px" alt=""/>
<img class="innerimage"  src="image/3.jpg" width="1024px"  alt=""/>
CSS
#banner_image, #slider-wrapper, .nivoSlide img{
max-width:100%; 
height:auto;}