White gaps between product image and gallery

Store Design
1

Hello!

Recently I found out that my store has big white gap between product image, other images and rest of the product page. I use debut theme. Thank you for your help!

Store is here (btw, I also have second store in different language, where the product page is just fine… Thank you!)

gap.png
gap.png1268×1080 185 KB

2

Hi @MatousKoc

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file
.product-single__media {
height: inherit !important;
}

Cheers!

3

Hello @collinsmbaka

thank you for your time and help! It partially worked, but on mobile screen there is still large gap between product gallery. Could you help me with that as well? Thanks!

Snímek obrazovky 2021-10-07 v 9.22.57.png
Snímek obrazovky 2021-10-07 v 9.22.57.png1132×1320 84.7 KB

4

Hi @MatousKoc

Please add this rule for the mobile

@media only screen and (max-width: 749px) {
.product-single__thumbnails-item-slide {
    height: inherit;
     }
}

Cheers!

5

Thank you!

6

Hello,

First let me say thanks in advance. I’ve used a few solutions found here for other issues. Thanks for that. Currently I am having the same issue but only on the mobile side. Viewing on my desktop it displays perfectly. I have the exact same gap as shown above. I’ve tried adding both rules to my Theme.scss.liquid but there has been no change. Here is a link to one of my product pages:

https://jkproaudio.com/collections/featured-deals-front-page/products/allen-heath-xone-96-analogue-dj-mixer

Any help would be much appreciated.