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.

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

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

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

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

Thank Nicolas, I didn't realize that HS used Joomla's native popup. 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.

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.

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

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.