Slick Carousel showing vertical on mobile instead of horizontal

I have a Slick Carousel in my webflow site. Desktop, tablet works fine, but when I switch to mobile the items are stacked up in vertical order instead of horizontal. Interesting fact is that when I open chrome dev tools and squeze the width of the page to mobile, it works fine, but when I actualy use the Mobile Responsive button or my phone it’s vertical.

My JS:

const slider = $('.c-slick_slider');
slider.slick({
    infinite: false,
    centerMode: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    variableWidth: true,
    prevArrow: $('.c-slick_arrow.cc-left'),
    nextArrow: $('.c-slick_arrow.cc-right'),
    responsive: [
    {
      breakpoint: 989,
      settings: {
        centerMode: true,
        slidesToShow: 1,
        variableWidth: false,
        infinite: false,
        vertical: false,
      }
    }]
  });

Link to the site: https://refokus-c0da71.webflow.io/

If you want the html of the section

<div class="c-slick"><div class="c-slick_slider slick-initialized slick-slider"><div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 35000px; transform: translate3d(-14px, 0px, 0px);"><div class="c-slick_item slick-slide slick-current slick-active" tabindex="0" style="" data-slick-index="0" aria-hidden="false"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="0">Read Article</a></div><div class="c-slick_item slick-slide slick-active" tabindex="0" style="" data-slick-index="1" aria-hidden="false"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="0">Read Article</a></div><div class="c-slick_item slick-slide slick-active" tabindex="0" style="" data-slick-index="2" aria-hidden="false"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="0">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="3" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="4" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="5" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="6" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div></div></div></div><div class="c-slick_arrows"><div class="c-slick_arrow cc-left slick-arrow slick-disabled" style="" aria-disabled="true"><div class="c-slick_arrow_text"></div></div><div class="c-slick_arrow cc-right slick-arrow" style="" aria-disabled="false"><div class="c-slick_arrow_text"></div></div></div></div>

Thanks, any help appreciated

Answer

For the following part of your code, add display: 'flex'.

<div class="slick-track" ....

It is currently defaulting to display: 'block', so when the width is less, it is automatically wrapping vertically.

Advertisement

Answer