Slick Slider picture size is bigger than the screen-CodePudding

I am making the slick slider with lightbox. Everthing is fine except for the full browerser screen size. When I maximize the browser screen size, the whole content is bigger the screen and cannot see anything. However, it works fine when I minimize the browser screen size like the phone screen ratio. I am finding the problem and still can't find which is causing this screen size issue.

I would really appreciate if anyone could help me to solve this screen size issue.

$(document).ready(function() {

  $('.slider-thumbnails').slick({
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider',
    focusOnSelect: true
  });

  $('.slider').slick({
    infinite: false,
    lazyLoad: 'ondemand',
    asNavFor: '.slider-thumbnails',
  });
});

<
script src = "https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"
integrity = "sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ=="
crossorigin = "anonymous" > < /script>

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #dedede;
  font-size: 14px;
  color: #333;
  line-height: 1.8;
}

.container {
  max-width: 900px;
  padding: 30px;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: solid 3px #f5f5f5;
}

h1 {
  margin-top: 0;
}

.product {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 768px) {
  .product {
    flex-direction: row;
  }
  .product-description {
    margin-left: 36px;
  }
}


/* Main Slider */

.slider {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border: solid 9px #fff;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 5px;
}

.slider .slick-slide {}

.slider .slick-slide img {
  width: 100%;
}


/* make button larger and change their positions */

.slick-prev,
.slick-next {
  width: 50px;
  height: 50px;
  z-index: 1;
}

.slick-prev {
  left: 5px;
}

.slick-next {
  right: 5px;
}

.slick-prev:before,
.slick-next:before {
  font-size: 40px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


/* General slick slider styling */

.slick-slide:focus,
.slick-slide:focus {
  outline: none;
  /* remove default outline when on :focus */
}


/* hide dots and arrow buttons when slider is not hovered */

.slick-slider:not(:hover) .slick-arrow,
.slick-slider:not(:hover) .slick-dots {
  opacity: 0;
}


/* transition effects for opacity */

.slick-arrow {
  transition: opacity 0.5s ease-out;
}

@media only screen and (min-width: 768px) {
  product-images {
    width: 50%;
  }
}


/* Thumbnails Slider */

.slider-thumbnails {
  margin-left: -15px;
  margin-right: -15px;
}

.slider-thumbnails .slick-slide {
  padding: 15px;
  transition: transform 0.3s ease-out;
}

.slider-thumbnails .slick-slide:focus img {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.slider-thumbnails .slick-slide img {
  max-width: 100%;
  border: solid 5px #fff;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease-out;
  border-radius: 3px;
}


/* Loading effects for main slider */

.slider {
  background: url(img/tail-spin.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px 100px;
  min-height: 100px;
}

.slider img.slick-loading {
  opacity: 0;
}

.slider img {
  transition: opacity 0.3s ease 0s;
}

.slider .slick-loading:after {
  content: 'loading'
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" />
<div class="container">
  <header>
    <h1>Slick Slider</h1>
  </header>

  <div class="product">
    <div class="product-images">

      <div class="slider">
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Image 1">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Image 2">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Image 3">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Image 4">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Image 5">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Image 6">
          </a>
        </div>
      </div>

      <div class="slider-thumbnails">
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Thumbnail 1">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Thumbnail 2">
          </a>
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Thumbnail 3">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Thumbnail 4">
          </a>
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Thumbnail 5">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Thumbnail 6">
        </div>
      </div>

    </div>
    <div class="product-description">
      <h2>Product Title</h2>
      <p>
        <strong>Price:</strong> Rp 120.000
        <br />
        <strong>Brand:</strong> Lorem Ipsum
        <br />
        <strong>Weight:</strong> 2kg
      </p>
      <h3>Description</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
</div>

CodePudding user response：

Looks like the issue is your css, flex setting: flex-direction: row;is causing the issue in this case.

@media only screen and (min-width: 768px) {
  .product {
    /*flex-direction: row; --> THIS SEEMS TO CAUSE THE ISSUE */
  }
}

You can still have it in a row for larger screens, but you will have to set a width for the .product-images element, like say 50%.

$(document).ready(function() {

  $('.slider-thumbnails').slick({
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider',
    focusOnSelect: true
  });

  $('.slider').slick({
    infinite: false,
    lazyLoad: 'ondemand',
    asNavFor: '.slider-thumbnails',
  });
});

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #dedede;
  font-size: 14px;
  color: #333;
  line-height: 1.8;
}

.container {
  max-width: 900px;
  padding: 30px;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: solid 3px #f5f5f5;
}

h1 {
  margin-top: 0;
}

.product {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 768px) {
  .product {
    /*flex-direction: row; --> THIS SEEMS TO CAUSE THE ISSUE */
    flex-direction: row;
  }
  .product-description {
    margin-left: 36px;
  }
  .product-images {
    width: 50%; /* include a width value */
  }
}


/* Main Slider */

.slider {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border: solid 9px #fff;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 5px;
}

.slider .slick-slide {}

.slider .slick-slide img {
  width: 100%;
}


/* make button larger and change their positions */

.slick-prev,
.slick-next {
  width: 50px;
  height: 50px;
  z-index: 1;
}

.slick-prev {
  left: 5px;
}

.slick-next {
  right: 5px;
}

.slick-prev:before,
.slick-next:before {
  font-size: 40px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


/* General slick slider styling */

.slick-slide:focus,
.slick-slide:focus {
  outline: none;
  /* remove default outline when on :focus */
}


/* hide dots and arrow buttons when slider is not hovered */

.slick-slider:not(:hover) .slick-arrow,
.slick-slider:not(:hover) .slick-dots {
  opacity: 0;
}


/* transition effects for opacity */

.slick-arrow {
  transition: opacity 0.5s ease-out;
}

@media only screen and (min-width: 768px) {
  product-images {
    width: 50%;
  }
}


/* Thumbnails Slider */

.slider-thumbnails {
  margin-left: -15px;
  margin-right: -15px;
}

.slider-thumbnails .slick-slide {
  padding: 15px;
  transition: transform 0.3s ease-out;
}

.slider-thumbnails .slick-slide:focus img {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.slider-thumbnails .slick-slide img {
  max-width: 100%;
  border: solid 5px #fff;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease-out;
  border-radius: 3px;
}


/* Loading effects for main slider */

.slider {
  background: url(img/tail-spin.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px 100px;
  min-height: 100px;
}

.slider img.slick-loading {
  opacity: 0;
}

.slider img {
  transition: opacity 0.3s ease 0s;
}

.slider .slick-loading:after {
  content: 'loading'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" />
<div class="container">
  <header>
    <h1>Slick Slider</h1>
  </header>

  <div class="product">
    <div class="product-images">

      <div class="slider">
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Image 1">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Image 2">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Image 3">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Image 4">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Image 5">
          </a>
        </div>
        <div>
          <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" data-lightbox="lightbox">
            <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Image 6">
          </a>
        </div>
      </div>

      <div class="slider-thumbnails">
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Thumbnail 1">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Thumbnail 2">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Thumbnail 3">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Thumbnail 4">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Thumbnail 5">
        </div>
        <div>
          <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Thumbnail 6">
        </div>
      </div>

    </div>
    <div class="product-description">
      <h2>Product Title</h2>
      <p>
        <strong>Price:</strong> Rp 120.000
        <br />
        <strong>Brand:</strong> Lorem Ipsum
        <br />
        <strong>Weight:</strong> 2kg
      </p>
      <h3>Description</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6 Zq HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>