html - My slider stops being responsive when I add <a href...> tags? Any ideas? -

when try add

 <a>..</a>  

around img tags make whole image link, works stops being responsive mobile view gets distorted.

any ideas how fix this?

thanks!

   div class="slider-wrap">             <div class="fullwidthbanner-container" >            <div class="fullwidthbanner-3" style="padding-top: 0px;">                    <ul>                 <!-- slide  1-->             <li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/about2.png"  data-saveperformance="off"  data-title="hop"></a>                         <img src="img/aboutslide1.png"  alt="bg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">                      </li>              <li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/about3.png"  data-saveperformance="off"  data-title="skip">                         <!-- main image -->                         <img src="img/about2.jpg"  alt="bg"  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">                      </li>                  <li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/aboutslide1.png"  data-saveperformance="off"  data-title="jump">                         <!-- main image -->                         <img src="img/about3.jpg"  alt="bg"  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">                      </li>                           </div>