title: Slick Carousel stretching focus Image to full screen on Mobile Devices
body: <p>I set up my carousel using Ken Wheeler's Slick for my photography site.</p>
  
  <p>I didn't want it to continue to run the carousel on a cellphone (or anything that small) so I set the entire section to display: hidden and then swapped it for a simple block display of the images (without carousel) at that screen size.  So, the Carousel is visible to anyone viewing at around 750 px or larger.  That part is fine.</p>
  
  <p>Problem is, the Carousel runs perfectly on a desktop, but when I view it on my tablet, the options of slideToShow:3 aren't working.  Instead, the center Image (the one in focus) is stretched to fill the screen, warping the dimensions.</p>
  
  <p>Not understanding why this would be operating differently in functionality than when looking at it on a desktop browser sized to the same width, but it is.  Again, it works perfectly as intended on a desktop.</p>
  
  <p>My site is:</p>
  
  <p><a href="http://philippenewman.com/photography/sanfrancisco.html" rel="nofollow">http://philippenewman.com/photography/sanfrancisco.html</a></p>
  
  <p>Many thanks for any help that can be provided!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Slick Playground&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" type="text/css" href="./css/slick/slick.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="./css/slick/slick-theme.css"&gt;
  
  &lt;!-- External Stylesheets--&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"&gt;
  
  &lt;!-- Bootstrap --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  
  &lt;!-- External Stylesheets--&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"&gt;
  
  &lt;!-- Bootstrap --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!--  Jquery--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled and minified Bootstrap JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;!-- Stylesheets--&gt;
  &lt;link rel="stylesheet" href="./css/style.css" type="text/css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;!-- Stylesheets--&gt;
  &lt;link rel="stylesheet" href="./css/style.css" type="text/css"&gt;
  &lt;style type="text/css"&gt;
      html,
      body {
          margin: 0;
          padding: 0;
      }
  
      * {
          box-sizing: border-box;
      }
  
      .slider {
          width: 90%;
          margin: 0 auto;
          margin-top: 100px;
      }
  
      .slick-slide {
          margin: 0px 20px;
      }
  
      .slick-slide img {
          width: 100%;
          max-height: 600px;
      }
  
      .slick-prev:before,
      .slick-next:before {
          color: white;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;!--BEGIN NAVBAR--&gt;
  &lt;nav class="navbar navbar-inverse navbar-fixed-top navbar-custom"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="index.html"&gt;philippe newman &lt;span style="color:#99b3ff"&gt;photography&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
  
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Galleries &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="sanfrancisco.html"&gt;San Francisco&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;California&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="process_production.html"&gt;process + production&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  &lt;!--END NAVBAR--&gt;
  
  
  &lt;!--   BEGIN MAIN CONTENT HERE--&gt;
  &lt;main class="main"&gt;
  
  &lt;!--       This section is for large tablet/Desktop views--&gt;
      &lt;section class="variable slider hidden-xs"&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/caltrain_lights_9_7_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/embarcadero_sunset_10_7_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/golden_gate_bridge_dusk_10_10_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/mission_st_alley_graffiti_san_francisco_8_26_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/metreon_sf_intersection_night_8_13_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/marshal_beach_sunset_second_10_19_2016.jps" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/cathedral_of_st_mary_san_francisco_7_20_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/sf_windmill_night_9_30_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/sutro_baths_sunset_second_shot_6_18_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="./images/photography/san_francisco/seacliff_sunset_6_21_2016.jpg" class="img-responsive"&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;!--        This section is for our mobile/tablet view only--&gt;
      &lt;section class="mobile-gallery hidden-sm hidden-md hidden-lg"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/caltrain_lights_9_7_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/embarcadero_sunset_10_7_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/golden_gate_bridge_dusk_10_10_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/mission_st_alley_graffiti_san_francisco_8_26_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/metreon_sf_intersection_night_8_13_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/marshal_beach_sunset_second_10_19_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/cathedral_of_st_mary_san_francisco_7_20_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/sf_windmill_night_9_30_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/sutro_baths_sunset_second_shot_6_18_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 photo-row"&gt;
                      &lt;img src="./images/photography/san_francisco/seacliff_sunset_6_21_2016_thumbnail.jpg" class="img-responsive center-block"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/main&gt;
  
  &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!--    JS file for Slick Scroller carousel--&gt;
  &lt;script src="./js/slick/slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).on('ready', function () {
          $(".variable").slick({
              infinite: true,
              variableWidth: true,
              slidesToShow: 3,
              draggable: true,
              centerMode: true,
              swipeToSlide: true
          });
      });
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>