Image display on mobile

-- url of the page with the problem -- : www.ckdev.info/digi/dgd-kim-u-2
-- HikaShop version -- : 3.2.1 business
-- Joomla version -- : 3.8.1
-- PHP version -- : 5.6
-- Browser(s) name and version -- : FF
-- Error-message(debug-mod must be tuned on) -- : None

We're completely overhauling the site look. I have one product page we're working on now (URL given above). Starting to get there on desktop, but mobile isn't so close.

On desktop, the 4 thumbnails are horizontal, yet, on a phone in portrait they either show 1 x 4 or 2 x 2 - randomly. There is enough space to be 4 x 1. Then, when you click one it opens in a rectangular popup and displays distorted (image is stretched vertically). In my image settings (assume that's the settings area that controls this) I have:

Thumbnail - 100x100
Product page image - 500x500
Force images size - No
Image scale mode - Keep ratio
Image - 500x500

As you'll see when viewing this page, in mobile it is not responsive. Images are too wide, and, as mentioned before, popups stretch the image vertically. What setting have I not done to make this behave so? Thanks.

Hello,

Since you have configured the product image to be 500x500 ; the page contains DIV with a size set to 500x500.
By configuration, it can't be responsive.

Regards,

OK. So I removed all the sizing, but I still have the issue of the popup, on mobile, stretching the image vertically. I changed "Force images size" to Yes, but got the error:

The folder /home/wwwckde/public_html/digi/media/com_hikashop/upload/thumbnails/0x0f is not writable

Hi,

You should turn off the "force size" setting if you don't specify the size because if you activate it, the system generates the thumbnails based on the size you set.

Tried it turned off and the popups are still stretched vertically.

I'm not following you.
Please clarify

On a phone, the images are still stretched vertically as previously mentioned whether Force Size is set to off or on.

Hello,

You should use another image popup system ; like "shadowbox".

Regards,

As opposed to using the builtin HS one? I though HS was responsive?

Hi,

That has nothing to do with your problem.
HikaShop can use different popup systems, for different things.
For the image on the product page when you click on it, the default popup system used is Joomla's mootools popup which doesn't work great with responsive display in some cases.
However, HikaShop offers two alternatives. If you go in the HikaShop configuration and change the "image popup mode" setting to "shadowbox (external)" it will use another popup system that we integrated in HikaShop and which should work fine on mobile devices.

Thank Nicolas, I didn't realize that HS used Joomla's native popup. [strike]Alas, neither of the shadowbox popups work any differently - both badly stretch the popup vertically.

I also tried changing the Popup Mode to Bootstrap and Vex with the same result - stretched images. I'm on a Samsung Galaxy S5 (droid) by the way.[/strike]

OK, helps when you do it on the site you're looking at! Yes, it does affect the display. However, though the image is displayed at the right ration, it's not responsive and runs off the right side of the shadownbox.

Hello,

Shadowbox is working perfectly fine in responsive.
demo.hikashop.com/index.php/en/hikashop/...oduct/1-pink-sandals

You should see to use PNG/JPEG images and not GIF.

Regards,

Just uploaded a JPG that was about 500px wide - it runs off the screen too.

Hello,

I don't know how your shadowbox is configured or what version you're using but it's not displaying the images as images ; it display the content into an iframe.
So I can't say you anything more than it's working perfectly fine in responsive in our demo website.

Regards,

I am still incredibly frustrated with this issue. Where do I see what shadowbox settings I have on my site? I have spent hours trying to find anything about this without any luck.

Nicolas said previously, "However, HikaShop offers two alternatives. If you go in the HikaShop configuration and change the "image popup mode" setting to "shadowbox (external)" it will use another popup system that we integrated in HikaShop and which should work fine on mobile devices." So if it's your integration where in HS do I find the settings for it?

The demo is different in that it has a white background; mine is black, which I understood is the standard shadowbox display.

Hello,

You have shadowbox.js provided by the component "com_jetestimonial" in your website.
The fact that this component add shadbowbox.js file into HikaShop page can mess-up with the shadowbox that we can provide via the "external" version.
Just look at the source code of your pages to see it.

So, I'm sorry but your issue with shadowbox is not related to our support since another component is adding its version and that version is not working properly.

Regards,