White space between product photos - desktop version

[Soypa]

I would appreciate some help reducing the white space between the product picture and follow up pictures. Only for desktop version, for mobile version I managed to solve the problem. 

store: soypasoaps.com

Thank you in advance!

[taruunn]

@media(min-width:1024px){  
.product-single__media img{
    height: 100% !important;
    object-fit: cover;
    max-height: 100% !important;
}
}

add this in your css or scss file 

it's not 100% perfect solution but it will work  

[Soypa]

Thanks for the fast feedback, however it not working still. I've tried to play with the height percentage, but nothing changes. Any idea what is wrong? It is in debut theme. 

[Kinjaldavra · Accepted solution]

@Soypa  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 749px){
.template-product #shopify-section-product-template .product-template__container .grid  .grid__item  .product-single__media-wrapper  #ImageZoom-product-template-21293038403737{

          height: 0% !important;
}
}

[Soypa]

Still no change 😕 

I've already included a few other codes to adjust other white spaces. Not sure whether this interferes with anything. Here is the screenshot.

[Kinjaldavra]

ok just open bracket please close bracket see screenshort http://prnt.sc/11mv3oo

[taruunn]

Here is the live example 

in the red circle my code 

[Soypa]

Thanks, it's working now! 

[taruunn · Accepted solution]

I saw your store its not working on all thumbnail 

you need to put this code 

@media (min-width: 749px){
.template-product #shopify-section-product-template .product-template__container .grid .grid__item .product-single__media-wrapper .product-single__media {
 height: 50% !important;
}
}

[Soypa]

I was testing something out. It's working now. Thanks. 

[Soypa]

Can I ask for additional help with white space between blog post photos and text?

[taruunn · Accepted solution]

I did Send a message you can reply,  

& here the code 

@media(min-width:1024px){
body .article__grid-image-container {
    height: 0;
}
}