White space between product photos - desktop version

Solved
Soypa
Tourist
9 0 1

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!

 

Soypa_0-1618674657888.png

 

0 Likes
taruunn
Excursionist
19 5 6
@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
Tourist
9 0 1

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. 

0 Likes
Natztech
Shopify Partner
668 182 440

This is an 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;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Soypa
Tourist
9 0 1

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.

Soypa_0-1618743059125.png

 

0 Likes
Natztech
Shopify Partner
668 182 440

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
taruunn
Excursionist
19 5 6

Here is the live example 

in the red circle my code 

taruunn_0-1618748351749.png

 

Soypa
Tourist
9 0 1

Thanks, it's working now! 

0 Likes
taruunn
Excursionist
19 5 6

This is an 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
Tourist
9 0 1

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

0 Likes