overlapping images responsive view

-- url of the page with the problem -- : 01.bluepoint-concept.nl
-- HikaShop version -- : 4.2.2
-- Joomla version -- : 3.9.12
-- PHP version -- : 7.xx
-- Error-message(debug-mod must be tuned on) -- : overlapping images responsive view

Hello,

Images and columns doen't scale when viewing it on ipad or mobile devices.. They overlap. How can we adjust this? what is the solution to have this working correctly?
Please see attachement.

Hello,

We have the latest version hikashop Business 4.2.2.
That won't solve the issue then..

Regards,

Mark

I have downloaded the package and installed again.. This is now how it looks like on ipad modus.. Not neatly and the image goes out of the box..

Hello Philip,

I tried your tests.. but then it looks even worse..
See attachments..

Hi,

Let me try to solve the mystery:
First, it has nothing to do with the "Safari bug". Actually, it happens in any browser.

If you look up the browser console, you'll find that it comes from CSS as follows:

if(isset($this->rows[0]) && $this->rows[0]->product_id == $this->row->product_id) {
	$css = '';
	if((int)$this->image->main_thumbnail_y>0){
		$css .= '
#'.$mainDivName.' .hikashop_product_image { height:'.(int)$this->image->main_thumbnail_y.'px; }';
	}
	if((int)$this->image->main_thumbnail_x>0){
		$css .= '
#'.$mainDivName.' .hikashop_product_image_subdiv { width:'.(int)$this->image->main_thumbnail_x.'px; }';
	}
	$doc = JFactory::getDocument();
	$doc->addStyleDeclaration($css);
}

audio, canvas, img, svg, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}