title: How can I make Slick Slider height responsive?
body: <p>I have a working Slick Slider (<a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a>), but can not get the height to be responsive. The images always stay the same height, no matter what size I shrink the browser to. I thought the "mobileFirst" setting would solve this but it doesn't seem to. Does anyone know how to make the slider and images inside it be responsive? Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
          &lt;title&gt;Bailey Miller&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/normalize.min.css"&gt;
          &lt;link rel="stylesheet" href="css/main.css"&gt;
          
          &lt;link rel="stylesheet" type="text/css" href="slick/slick.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/&gt;
            &lt;style&gt;
                body{
                    background:black;
                }
            &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
    
  
    &lt;div class="variable-width"&gt;
     &lt;div&gt;&lt;img src="img/wedding/7.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/8.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/9.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/10.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/12.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/13.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/22.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/23.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/24.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/25.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/28.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/29.jpg"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="img/wedding/30.jpg"/&gt;&lt;/div&gt;
    &lt;/div&gt;
          
  &lt;!-- jQuery--&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          
  &lt;!--menu js--&gt;
      &lt;script src="menu/script.js"&gt;&lt;/script&gt;
          
  &lt;!--    slick--&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="slick/slick.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $('.variable-width').slick({
              mobileFirst: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            centerMode: false,
            variableWidth: true,
              focusOnSelect: true
              
          });
      });
    &lt;/script&gt;
      
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Slider */
  .slick-slider
  {
      position: relative;
      display: block;
  
      -moz-box-sizing: border-box;
           box-sizing: border-box;
  
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
  
  .slick-list
  {
      position: relative;
  
      display: block;
      overflow: hidden;
  
      margin: 0 20px;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
  
  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
  
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
  
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }
  
  .slick-slide
  {
      display: none;
      float: left;
  
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
  
      height: auto;
  
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }</code></pre>
  </div>
  </div>
  </p>