Слик слайдер! Как растянуть слайдер на весь див, сделать его адаптивным!

Подскажите каким образом я могу растянуть слайдер на весь див заданный для слайдера, никак не получается! Так же не могу сделать его адаптивным, что бы при уменьшении окошка в браузере слайдер уменьшался вместе с картинкой! Вот ссылка на сайт: http://market.happy-puppy.com.ua

<div class="slider">
<div class="slick-slider slick-initialized slick-dotted"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button>
    <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 2100px;"><div class="slick-slide" data-slick-index="0" aria-hidden="true" style="transition: opacity 500ms linear; width: 700px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00"><img src="/wp-content/themes/Divi/images/1200х600-восстановлено.jpg" alt="альтернативный текст"></div><div class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" style="width: 700px; position: relative; left: -700px; top: 0px; z-index: 999; opacity: 1;" tabindex="0" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01"><img src="/wp-content/themes/Divi/images/1200х6001.jpg" alt="альтернативный текст"></div><div class="slick-slide" data-slick-index="2" aria-hidden="true" style="transition: opacity 500ms linear; width: 700px; position: relative; left: -1400px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control02"><img src="/wp-content/themes/Divi/images/СлайдерКофе.jpg" alt="альтернативный текст"></div></div></div>

<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button><ul class="slick-dots" style="display: block;" role="tablist"><li class="" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="-1">1</button></li><li role="presentation" class="slick-active"><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="0" aria-selected="true">2</button></li><li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1">3</button></li></ul></div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="/wp-content/themes/Divi/slick-1.8.1/slick/slick.min.js"></script>
  <script type="text/javascript">
      $('.slick-slider').slick({
          dots: true,
          autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  cssEase: 'linear'
      });
  </script>
                        </div>