I am trying to create a responsive slider using Slick on https://bhr-caterers.nk-creative.com/

On mobile, I only want one slide to show, but 3 are showing. I am trying to use Slick slider's built-in responsive options, but I don't think it is working.

Here is my JS for the slider. Is there something I am doing wrong? I have tried disabling all of my CSS and I am still having this issue.

jQuery(document).ready(function($){





//Sliders//

    $('.slider').slick({

    lazyLoad: 'onDemand',

    centerMode: true,

    infinite: true,

    slidesToShow: 1,

    slidesToScroll: 1,

    dots: true,

    //autoplay: true,

    autoplaySpeed: 6000,

    responsive: [

    {

      breakpoint: 768,

      settings: {

      slidesToShow: 1,

      slidesToScroll: 1

      }

    }

   ]

  });

});