Styling gaps on product display between main image and thumbnails

  • Posts: 13
  • Thank you received: 1
2 years 9 months ago #333877

-- 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

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13036
  • MODERATOR
2 years 9 months ago #333906

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 :

#hikashop_image_main_thumb_div, .hikashop_product_main_image {
    height: auto !important;
}
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

Please Log in or Create an account to join the conversation.

  • Posts: 13
  • Thank you received: 1
2 years 8 months ago #334304

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.

Please Log in or Create an account to join the conversation.

  • Posts: 4486
  • Thank you received: 609
  • MODERATOR
2 years 8 months ago #334317

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 :

#hikashop_image_main_thumb_div, 
.hikashop_product_main_image {
    height: auto !important;
[b]}
After :[/b]
#hikashop_image_main_thumb_div, 
.hikashop_product_main_image, 
.hikashop_product_main_image_thumb {
    height: auto !important;
}

This will solve your current issue on the variant image.
Regards

Last edit: 2 years 8 months ago by Philip.
The following user(s) said Thank You: Valserine

Please Log in or Create an account to join the conversation.

  • Posts: 13
  • Thank you received: 1
2 years 8 months ago #334513

Many thanks Philip - does the job perfectly ! M

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.068 seconds
Powered by Kunena Forum