How can to responsive Nivo slider with content ?

I am a newbie to web development.I just tried to add Nivo slider to my content.I added that.But the problem is when I try to transfer my template to mobile devices(320px) it won't work properly.The background picture got responsiveness, but content in the slider won't be responsive.How come I fix this problem.I tried many ways but won't work.Here is my Nivo slider HTML code...

<section id="wrapper">
    <div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">     
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg" alt="" />    
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg" alt="" title="#htmlcaption1" />     
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg" alt="" />     
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg" alt="" title="#htmlcaption2" /> 
</div> 

<div id="htmlcaption1" class="nivo-html-caption responsive_slider">   
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis incidunt, iusto sit repellendus vel consequuntur, consequatur unde possimus sapiente expedita aut! Magnam necessitatibus corporis fugit impedit illum hic corrupti.
    </p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>         
</div>

<div id="htmlcaption2" class="nivo-html-caption responsive_slider">     
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis incidunt, iusto sit repellendus vel consequuntur, consequatur unde possimus sapiente expedita aut! Magnam necessitatibus corporis fugit impedit illum hic corrupti.
    </p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>         
</div>     
</div>
</section>

And here is my CSS code...

.slider-wrapper { 
    width: 100%;    
    margin: 0 auto;    
}

.nivo-caption {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  font-size: 22px;
  left: 50%;
  text-align: center;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 50%;
}



.slider_button_1 {
    color: #FFFFFF;     
    border-radius: 0;
    border: 1px solid #FFFFFF;
    padding: 10px 15px;
    text-transform: uppercase;    
}

.slider_button_1:hover {
    background: #0069A8;
}

I want to response the slider with that's content.Is there anyway.

Thanks from here.

Try this

CSS

#nivoSlider, #nivoSlider img{width:100%;height:auto !important}

HTML

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="nivoSlider" class="nivoSlider">
       <img src="" />
    </div>
</div>

Reference: How to make Nivo Slider Responsive