Debut theme product pic only showing on hover

[vpaskaleva]

Hi, I am helping a friend with their Debut theme  website. There is some issue with visualising the product picture on the product page - it's only showing on hover. I welcome any advice! Thank you!

[Mustafa_Ali]

hey @vpaskaleva share the URLs of your website plz

[vpaskaleva]

Here: https://www.northumbriancandleworks.co.uk/

Thanks!

[Mustafa_Ali]

hey @vpaskaleva i can't see the problem in your website but will you plz share the URL of that page 

[vpaskaleva]

It's on every product page. here is a screenshot:

[Mustafa_Ali]

but i can't see the issue i think you network issue that's why it take some time to load 

[vpaskaleva]

It's happening on different devices on different networks

[Mustafa_Ali]

<style>
div#ImageZoom-product-template-9088417824813 {
    display: block !important;
    visibility: visible !important;
}
</style>

then try this one 

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[B2Bridge · Accepted solution]

Hi @vpaskaleva, you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code

Step 2: Find theme.scss.css file

Step 3: Paste this code at the bottom of the file

.product-single__media img {
    height: 100% !important;
}

Result:

If this helpful, please let us know by giving us a like and marking it as a solution. Thanks

[vpaskaleva]

Hi, thanks, i think it worked. But then the other images from the product gallery still don't show on load, you have to move around the mouse or scroll on mobile for them to show. On load it shows like an empty rectangle. Also there is the same issue on any collection page - you have to move around the mouse for the thumbnails to show:

[B2Bridge]

You can use this code:

.grid-view-item__image {
height: 100% !important;
}

[vpaskaleva]

where should I put it?

[B2Bridge]

You can put it at the bottom of the theme.scss.css file

[vpaskaleva]

It worked! Thank you! Can you please help me with the empty rectangles of the product gallery too? And how can I give you a like?