Faced with such a bug, the width of the slider with adaptive, more than the width of the container in which the slider is located
Tried to set the width: 100 slider, also unslick and variableWidth - does not help
`<div class="container"> <div class="row"> <div class="col-12"> <div class="outset-block d-flex justify-content-center"> <div class="inset-block"> <div class="responsive"> <div class="features-item d-flex justify-content-center"> <i class="fas fa-thumbs-up"></i> <div class="features-item-text"> <h4> Full warrenty </h4> <h5> Read About Our Warrenty </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-truck"></i> <div class="features-item-text"> <h4> express shipping </h4> <h5> Local & International Shipping </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-comment-dots"></i> <div class="features-item-text"> <h4> mobile blog </h4> <h5> Discuss Your Favourite Phone </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-headphones"></i> <div class="features-item-text"> <h4> 24/7 Support </h4> <h5> Get Full Support via Chat </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-thumbs-up"></i> <div class="features-item-text"> <h4> Full warrenty </h4> <h5> Read About Our Warrenty </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-truck"></i> <div class="features-item-text"> <h4> express shipping </h4> <h5> Local & International Shipping </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-comment-dots"></i> <div class="features-item-text"> <h4> mobile blog </h4> <h5> Discuss Your Favourite Phone </h5> <span class="separator"></span> </div> </div> <div class="features-item d-flex justify-content-center"> <i class="fas fa-headphones"></i> <div class="features-item-text"> <h4> 24/7 Support </h4> <h5> Get Full Support via Chat </h5> <span class="separator"></span> </div> </div> </div> </div> </div> <!--/slider--> </div> <!--/inset-block--> </div> .outset-block { height: 90px; border: 2px solid #444444; background-color: #fff; } .inset-block { width: 1080px; margin-top: -5px; height: 80px; background-color: #fff;/*#fff*/ z-index: 1; } .features-item i { color: #444444; font-size: 32px; font-weight: 400; margin-right: 20px; } .features-item h4 { color: #222222; font-size: 16px; font-weight: 700; } .features-item h5 { /* Style for "Read About" */ color: #444444; font-size: 12px; font-weight: 400; text-transform: capitalize; } .features-item-text .separator { width: 10px; height: 2px; background-color: #cccccc; margin-bottom: 15px; } $('.responsive').slick({ autoplay: true, autoplaySpeed: 5000, dots: false, arrows: false, infinite: true, speed: 1000, slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 2, dots: false, unslick: true } }, { breakpoint: 600, settings: { slidesToShow: 1, unslick: true, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, unslick: true, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] });` Have you encountered the same problem? The whole layout moves to the right when adapting, changing the width does not help (or not so) Do you have any thoughts on this? I would be grateful if you tell me where to look :)
