Hidden space in my product page

[k3k3k3]

Hi, I am developing my product page and noticed a space in the middle. Is there anything I need to delete in my code? I would appreciate any help. Thanks!

url store: kwa-e.com

[k3k3k3]

It occurs in mobile view; I’m not sure if it also happens in desktop view.

[tim_tairli]

In desktop view it overlaps your media slideshow.

There is a code which is not part of the theme and supposedly should add some kind of a product image carousel:

Was probably added by your or someone working on your store – it does not work because it depends on jQuery and lazyload libraries which are no longer used in Dawn and similar themes.

However, those “empty” elements still take space on screen.

I’d recommend deleting this code.

The code seems to be added right above this line or in nippets/product-media-gallery.liquid

sections/main-product.liquid

[k3k3k3]

Hi, could you let me know which part I should delete?

[k3k3k3]

Hey there! I’m not sure which part I should delete. Could you please guide me? Thanks!

[tim_tairli]

Of course, I can’t see your theme source code, but start right below </media-gallery> and go down to inlcude the </script>:

I see it like this

Stuff I’d delete, hope it will give you hints:

         <link href="//kwa-e.com/cdn/shop/t/2/assets/slick.css?v=99639561323254153231754309100" rel="stylesheet" type="text/css" media="all" />
<link href="//kwa-e.com/cdn/shop/t/2/assets/slick-theme.css?v=154572330992693840251754309140" rel="stylesheet" type="text/css" media="all" />
<script src="//kwa-e.com/cdn/shop/t/2/assets/slick.js?v=35915215796003984031754309273" type="text/javascript"></script>


<style>
  .slick-prev:before, .slick-next:before{
    color:#000;
  }
  .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: transparent;
    outline: none;
    background: #ffffffbf;
}
.slick-next, .slick-prev {
    right: 25px;
    background: #fff;
    border-radius: 100px;
    height: 40px;
    width: 40px;
      box-shadow: 0px 0px 18px #0000002b;
    }
  .slick-next {
    right: 25px;
    }
  .slick-prev {
    left: 25px;
        z-index: 999;
}
.slick-slide img {
    width: 100%;
}
  .slick-initialized .slick-slide{
    margin:10px;
  }
.slideshow-item p{
  margin:0px;
}
</style>


<div class="container">
  <div class="carousel-main">
    
      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/black_puffftee_front.png?v=1777552855" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/black_puffftee_back.png?v=1777552853" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/Eric_Model_front.jpg?v=1780370793" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/Eric_Model_back.jpg?v=1780370793" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/Eric_Model.jpg?v=1780370794" />
      </div>

      
      
      
  </div>
  <div class="carousel-nav">
    
      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/black_puffftee_front_450x.png?v=1777552855" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/black_puffftee_back_450x.png?v=1777552853" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/Eric_Model_front_450x.jpg?v=1780370793" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/Eric_Model_back_450x.jpg?v=1780370793" />
      </div>

      <div class="carousel-cell">
  <img data-lazy="//kwa-e.com/cdn/shop/files/Eric_Model_450x.jpg?v=1780370794" />
      </div>

  </div>

</div>
<script>
 $('.carousel-main').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.carousel-nav',
   lazyLoad: 'progressive',
    adaptiveHeight: true
});
$('.carousel-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.carousel-main',
  arrows: true,
  centerMode: true,
  focusOnSelect: true,
  lazyLoad: 'progressive',
   adaptiveHeight: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll:2
      }
    }
  ]
});
		
</script> 

[k3k3k3]

Hey! I think I found the code that I need to delete, but thanks for your hints.