Styling gaps on product display between main image and thumbnails

-- HikaShop version -- : HikaShop Business 4.4.2 [2105071220]
-- Joomla version -- : 3.9.2
-- Browser(s) name and version -- : Chrome
-- Error-message(debug-mod must be tuned on) -- : Gaps between main product page and thumbnails

Hi there,

Art store looks good on desktop. However, gap between main image and thumbnails increases as screen width narrows. Screen shot from Desktop. Gap even more pronounced on my Samsung J3 phone. Way too big - styling ? Any tips appreciated. Also, wondering how can I flip the price and characteristics display, ie characteristics on top and prices underneath.

Any support gratefully received.

Many thanks.

N

Hi,

1. It comes from the CSS of the template downsizing the images dynamically on mobile devices. You can add such CSS to make the height of the area dynamic to make it work nicely with that : www.hikashop.com/support/documentation/1...ize-the-display.html

2. You can edit the file product / show_tabular.php via the menu Display>Views and move the code of each area. I would actually recommend you update to HikaShop 4.4.3 before. That way, you should get the drag & drop interface when editing that view file, allowing you to easily swap both without touching the code:
www.hikashop.com/home/blog/471-hikashop-4-4-3.html#drag

Many thanks for that, I implemented the css as you suggest and it works fine when the page is first displayed, but when a variant, like size is selected, the gap re-appears. Any ideas ? Thanks again.

Hello,

Indeed, that because HikaShop use several different container to display product image (variant relative), just add 1 more selector, in order to have the css command for each case.
Before : After :[/b]
This will solve your current issue on the variant image.
Regards

Many thanks Philip - does the job perfectly ! M