title: Create a mobile responsive image slider using html and css
body: <p>I have made an image slider using html and css. But the problem is, it's not mobile responsive, it's height and  width isn't changing according to mobile screen size. My sample code is below:</p>
  
  <pre><code>&lt;section id="home" class="divider"&gt;
        &lt;div class="container-fluid p-0"&gt;
  
          &lt;!-- START REVOLUTION SLIDER 5.0.7 --&gt;
          &lt;div id="rev_slider_home_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="news-gallery34" style="margin:0px auto;background-color:#ffffff;padding:0px;margin-top:0px;margin-bottom:0px;"&gt;
            &lt;!-- START REVOLUTION SLIDER 5.0.7 fullwidth mode --&gt;
            &lt;div id="rev_slider_home" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7"&gt;
              &lt;ul&gt;
                &lt;!-- SLIDE 1 --&gt;
                &lt;li data-index="rs-1" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="images/bg/bg12.jpg" data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-title="Make an Impact"&gt;
                  &lt;!-- MAIN IMAGE --&gt;
                  &lt;img src="images/bg/bg12.jpg" alt="" data-bgposition="top 40%" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina&gt;
                  &lt;!-- LAYERS --&gt;
                  &lt;!-- LAYER NR. 1 --&gt;
                  &lt;div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-0" 
                    id="slide-1-layer-1" 
                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                    data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                    data-width="full"
                    data-height="full"
                    data-whitespace="normal"
                    data-transform_idle="o:1;"
                    data-transform_in="opacity:0;s:1500;e:Power3.easeInOut;" 
                    data-transform_out="opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                    data-start="1000" 
                    data-basealign="slide" 
                    data-responsive_offset="on" 
                    style="z-index: 5;background-color:rgba(0, 0, 0, 0.35);border-color:rgba(0, 0, 0, 1.00);"&gt; 
                  &lt;/div&gt;
            &lt;/li&gt;
         &lt;/ul&gt;
              &lt;div class="tp-bannertimer tp-bottom" style="height: 5px; background-color: rgba(166, 216, 236, 1.00);"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Is there any way to make it mobile responsive so that the height and width of the slides fit according to the mobile screen size?</p>