Problem with gallery Basel

Hello.
I have installed the Basel template. In the product loop, when I hover the product images, I see the other images in the gallery vertically aligned to the top. Also, in the product gallery, when clicking to one of the bottom images, the whole gallery goes to the top and all the other images disappear. I’m sending you the links via private message. Thanks.

Hi,

Could you please attach some screenshots of the problem since we don’t see it on your website now?

Regards

I realized the bug I discovered is related to the WooCommerce setting “Customize/WooCommerce/Product Images/Uncropped”.

If you select this option, the result will be the one I’m showing in the attached images.
As you see in the first attached image, the hover product image is vertically aligned to the top (instead than the center); also, if you click in the last-but-two image of the gallery (view second image attached), the gallery disappears. The same thing happens if you click on the down button (view the third attached image).
These things happen only if you set the images not to be cropped.
In this particular site, I need the images not to be cropped, because they are related to photographs and those professional photographers can’t accept their images to be cropped.

Attachments:

You must be logged in to view attached files.

As for the gallery issue, unfortunately, our vertical carousel JS library doesn’t support different images size. You can try to use bottom horizontal carousel instead in Theme Settings -> product page.

And here is a custom CSS code for this the hover problem

body .basel-hover-quick .hover-img {
        top: 0;
   left: 0;
   right: 0;
   left: 0;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: white;
}

Thank you very much.

One more thing: the post carousel does not show all the posts aligned. In my case, the thumbnail of the second post is some pixels below the line of the other thumbnails.
You can see that in the homepage of the website indicated via private message.

This issue is caused by custom CSS code. It can be seen on this screenshot https://gyazo.com/877deefcb2f18d17e053c8c6db3e5c73

Regards

[Author]

Posts