Slick Slide Carousel showing parts of neighbor images

Question

I have a portfolio website (http://viktorjorneryd.com/?pid=4) where on mobile devices I have the slick slide carousel limited down to one image showing. If it's a wide picture it is shown on its own, and if it's a vertical one they are previewed two at a time. On the computer (and when resizing) it's fine, but on mobile devices it shows a small portion of the vertical photos next to the wide one, which breaks the design.

https://www.dropbox.com/s/wpsjavhxlbp67if/Screenshot_20190311-175421_Chrome.jpg?dl=0

Here is a picture of how it looks. I've tried to make the picture wider to match two vertical photos next to each other - to no avail. I'm out of the ideas and I'm not even sure why it causes this..

Here is the slick slide config.

 $(document).ready(function(){
   $('.slider_image_wrap_mobile').slick({
    infinite: true,
    speed: 100,
    fade: false,
    cssEase: 'linear',
    arrows: true,
    nextArrow: "<img class='slider_control_right' src='images/webinterface/arrow_png.png'>",
    prevArrow: "<img class='slider_control_left' src='images/webinterface/arrow_png.png'>"
  });
});

Answer 1

I would take a look into the responsive aspect

http://kenwheeler.github.io/slick/

You can define breakpoints and limit the slides that are shown.

  responsive: [
    {
      breakpoint: 1024,  // The media breakpoint
      settings: {
        slidesToShow: 3,    // how many images you want to show in your case 1
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },

I took a further look into this and it seems this fixed it.

.slider_image_single {
    ...
    padding: 1px; /* this one */