title: Why slick slider is not adaptive?
body: <p>Why when I reduce screen size my slick slider is not adaptive?</p>
  
  <p>settings of slick:</p>
  
  <pre><code>$(document).ready(function(){
    $('.head-slider__slider').slick({
      dots: true,
      infinite: true,
      speed: 1000,
    });
  });
  </code></pre>
  
  <p>code structure of slider:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.head-slider {
   display: flex;
   align-items: center;
   min-height: 900px;
   background: url(../img/sliders/slide_img.jpg);
   background-size: cover;
   background-position: fixed;
   .head-slider__slider {
    width: 100%;
    .slider__slide {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     min-height: 500px;
     .slide__slide-header {
      h2 {
       font-size: 7rem;
       font-family: @FfontRaleway;
       font-weight: @WfontSemiBold;
       color: @whiteColor;
      }
     }
     .slide__slide-description {
      font-size: 5rem;
      font-family: @FfontRaleway;
      font-weight: @WfontLight;
      color: @whiteColor;
     }
     .slide__slide-buttons {
      a {
       .lightButtons(@whiteColor);
       margin-right: 1%;
      }
     }
    }
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section class="head-slider"&gt;
    &lt;div class="container"&gt;
     &lt;div class="head-slider__slider"&gt;
      &lt;div class="slider__slide"&gt;
       &lt;div class="slide__slide-header"&gt;
        &lt;h2&gt;Expire&lt;/h2&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-description"&gt;
        &lt;p&gt;Professionaly designed, carefully made for your enjoyement&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-buttons"&gt;
        &lt;a href="#"&gt;Explore&lt;/a&gt;
        &lt;a href="#"&gt;Learn more&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--slide-end--&gt;
      &lt;div class="slider__slide"&gt;
       &lt;div class="slide__slide-header"&gt;
        &lt;h2&gt;Expire&lt;/h2&gt;
        &lt;object data="" type=""&gt;&lt;/object&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-description"&gt;
        &lt;p&gt;Professionaly designed, carefully made for your enjoyement&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-buttons"&gt;
        &lt;a href="#"&gt;Explore&lt;/a&gt;
        &lt;a href="#"&gt;Learn more&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--slide-end--&gt;
      &lt;div class="slider__slide"&gt;
       &lt;div class="slide__slide-header"&gt;
        &lt;h2&gt;Expire&lt;/h2&gt;
        &lt;object data="" type=""&gt;&lt;/object&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-description"&gt;
        &lt;p&gt;Professionaly designed, carefully made for your enjoyement&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-buttons"&gt;
        &lt;a href="#"&gt;Explore&lt;/a&gt;
        &lt;a href="#"&gt;Learn more&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--slide-end--&gt;
      &lt;div class="slider__slide"&gt;
       &lt;div class="slide__slide-header"&gt;
        &lt;h2&gt;Expire&lt;/h2&gt;
        &lt;object data="" type=""&gt;&lt;/object&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-description"&gt;
        &lt;p&gt;Professionaly designed, carefully made for your enjoyement&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="slide__slide-buttons"&gt;
        &lt;a href="#"&gt;Explore&lt;/a&gt;
        &lt;a href="#"&gt;Learn more&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--slide-end--&gt;  
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tryed delete <code>display: flex</code> for <code>.head-slider__slider</code> and adaptive begins work, but the slider has moved upwards, but it needs to be centered.</p>
  
  <p>Example: <a href="http://uzinouzi.github.io/testtemplate" rel="nofollow noreferrer">http://uzinouzi.github.io/testtemplate</a></p>
  
  <p>P.S. Sorry for my English, I am from Belarussia. </p>