Product image in mobile too large

-- url of the page with the problem -- : deborahblyth.com
-- HikaShop version -- : 4.4.5
-- Joomla version -- : 3.10.6
-- PHP version -- : 7.4.25

Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image:
deborahblyth.com/rings/jewelry/the-venus-ring

The code shows the height of 670 as inline css:

<div class="hikashop_product_main_image_thumb hikashop_img_mode_classic" id="hikashop_image_main_thumb_div" style="height:670px;">

I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile.

<div style="<?php if(!empty($divHeight) && !$this->config->get('image_force_size',true)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">

Hi, thanks for that, it solved my issue but only on the main image, as soon as I click a different variant, like gold or silver the css changes to hikashop_image_main_thumb_div_22 adding '_ and a number' how do I control all of these numbers?

Thanks.

Hi,

I know that i should open my own thread but you gave me a part of the solution for my case, here, Philip.
I applied your code about media in my frontend custom css and it works great for the main image.
unfortunately it doesn't apply to the image of my variants (characteristics) i tried the following command but it doesn't change anything :

@media only screen and (max-width: 600px) {
div#hikashop_image_variant_thumb_div {
height: unset !important;
}

i guess i have to replace the word "variant" but by which word ?
thanks.

Hello

That's what i did. In fact in the first (the main image) it is written :

<div class= "hikashop_product_main_image_thumb.... id="hikashop_main_image_thumb_div">

and for the variant image :

<div id="hikashop_main_image_div_155..

so i wrote in the frontend custom :

@media only screen and (max-width: 600px) {
div#hikashop_image_main_thumb_div_XXX {
height: unset !important;
}

but it doesn't change anything again. and it seems to be the same thing which Spytech described. but i use the hikashop frontend.

i give you the link example (may be i am not good at reading with the inspector code) : example with variants

regards

Hello again

in fact i found the perfect solution in this thread

thank you for your help.
enjoy your sunday