Adapt Photo block heignt

-- url of the page with the problem -- : www.elegantiastore.fr/index.php/fr/product/308-robe-nataly
-- HikaShop version -- : 4.4.4
-- Joomla version -- : 3.10.3
-- PHP version -- : 7.4.24
-- Browser(s) name and version -- : Chrome

Hi,

I'm a CSS begginer yet and therefore I encounter a difficulty to adapt the main photo block depending on the screen width.

When I'm on a large screen, the miniatures below the main picture appears right below it -> Great
When I'm on a smaller's screen version, smaller the screen, bigger the distance between the picture and the miniatures. -> Not great
This because of the standart height of the picture's bloc that is fixed. :

Is it possible to have a responsive bock that adapt to the picture 's height so that the scrool arrows appear in the middle of the pic and the miniatures right at the bottom ?
Where to write this code ?

Thanks for your answers !

Hello,

Quite strange because I see that you have the HikaShop 4.4.4, and despite everything, this problem that you reported to us is in our minds corrected ...
Maybe you have the first build of HikaShop 4.4.4 and the fix is ​​in a higher build? ...

Can you update to see if that fixes your problem?
Awaiting your returns to going more far in your subject.

Regards

Hi,
Thanks for your quick answer.
I checked and when I update the new version, it comes back to normal.

Though I realised it is a modification I made in :media/com_hikashop/css/style_default.css.
There I adapt the products to 2 colums in line 169:
The goal is having 2 columns of products on secreen, but it creates, i realise, the described problem !

IS it possible to overcome this ?

Thanks

Hello,

No, we don't think that this come from this custom css command.
But did you try to update your HikaShop version as I invite you to process previously ?
=> If, yes can you confirm that this change nothing to your current issue.
Another point to check, this setting :


This will force your image size, and if it's not required the most simple is to remove it, and basically use directly an image with the good size maybe.
BUT if for a reason or another it's required, then you can use this custom css command to, as you say overcome this display issue :
.hikashop_product_page div#hikashop_image_main_thumb_div {
height: unset !important;
}

Note : That the class ".hikashop_product_page" is to restrict the css command to the required context, here the product page.
Hope this will allow you to solve the issue.

Regards