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.

We have read a lot threads about the @media rules.. but none of them are responding?
Pleas help..

Thanks.

Hello,

We aren't sure this will solve your issue, but can you try to update your HikaShop version.
In the last build, we have add some specific css command for Safari navigator.

Hope this will solve your issue.
Regards

Hello,

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

Regards,

Mark

Hi,

You already have the 4.2.2 but you have an old build of the 4.2.2. Since then, we've added some CSS to help with the display of listings with Safari as it was reported to us a few days ago.
So download again the install package on our website and install it again on yours and it will add the patches for better display on Safari. Then, please try again and see how it goes.

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,

Can you process some tests, like this :
- Try with a default template like ProtoStar
- Switch for your hikashop frontend css (by default) :



Awaiting news from you to move forward on your subject
Regards

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:



and




This is inserted as a <style> tag in the <head> section:




And it's generated by the following code at the bottom of any views using the product image, like in your case "listing_img_title":

Obviously, this "fixes" the container sizes depending on the settings in the HikaShop main configuration for images, basically "killing" responsiveness.
So, first thing to do: play with those settings, though it might not help. (Which is why I myself comment the above code out in a view override.)
Or override this CSS in your custom frontend CSS.

In this particular case, even if you did any of the above, your Joomla template is missing classic CSS for responsive images and similar content, such as So, you may want to add that, too (on template level?) and, for webp images in this case, also add a selector "picture > *".

Amen.

Hello,

Yes, @BluepointWebdesign try to process some tests by define different size here :



And, @lousyfool is right you can adapt your css command with your own css command directly in your frontend.
Regards