[Resolved] Product image thumbnails at single product page not counted to element hight

[Author]

Posts

[Iivo Kerminen]

I am using Avada theme and Woocommerce with Toolset.

I updated to the latest Toolset plugins and noticed that there are several ready made Layouts.

I am using the "Layout for Products (editable)" which was ready made but noticed a problem with product image thumbnails in single product page. This comes out when the product image height (image class="col-sm-6" height) is bigger than the product details height (product details class="col-sm-6").

Thumbnails seems to be NOT counted to the height of the product image element and thus thumbnails overlap with woo-display-tabs (screen shot attached). In my screen shot, product image col-sm-6 height is 735px and product details col-sm-6 height is only 364px in height.

CLASS "avada-product-gallery-thumbs-wrapper", which houses the thumbnails, is not inside (in code it is but not in the rendered view) the DIV "row layouts-avada-spacer" which is inside DIV "container fusion-row avada-logo-integration " which houses the product image, product title, buy options and so on. Thumbnails class "avada-product-gallery-thumbs-wrapper" seems to be absolute positioned outside the parent elements.

Also I found out that if I take out position:absolute from .avada-product-gallery-thumbs-wrapper, thumbnails display correctly but then it shows all hidden thumbnails on the thumbnails row and then they overlapp with the product details col-sm-6..

How to correct this?

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Kerminen,

Thank you for contacting Toolset Support. I think this can be fixed with some CSS.

1. Toolset Layouts do not have any ready made layout named as "Layout for Products (editable)" so I think that this layout is being created by someone in your site in the past. It only adds basic page/post layouts.

2. Can you please provide the link to your single product page where issue appears so I can inspect it?

Thank you

[Iivo Kerminen]

Sorry, right now I cant because I have problems with Toolset breaking my site...

https://toolset.com/forums/topic/toolset-with-avada-broke-the-whole-site/#post-528374

[Iivo Kerminen]

Ok, now I can give you a working URL from where you can see the problem.

hidden link

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Okay great, thank you for providing the link. I am working on this issue and will get back to you soon with an update.

Thank you for your cooperation

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hello Kerminen,

Please add the following CSS in your theme’s style.css file OR in Theme Options >> Custom CSS section:

.avada-product-gallery .avada-product-gallery-thumbs-wrapper {
    position: relative;
}

I hope it will resolve the overlapping issue.
Thank you