[Skip to main content](#vessel-content) # Styling gaps on product display between main image and thumbnails ## - **[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")** - [![NiallLeavy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Topic Author - [ Offline](/forum/user/61344-niallleavy) Less More - Posts: 13 - Thank you received: 1 - - 5 years 4 months ago [\#333877](#333877) by [NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile") *[Styling gaps on product display between main image and thumbnails](/forum/26-product-category-display/902850-styling-gaps-on-product-display-between-main-image-and-thumbnails#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")* was created by *[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")* -- 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 - [ ![ScreenProduct.JPG](/forum/attachment/53111) ](/forum/attachment/53111 "ScreenProduct.JPG") [ ](/forum/attachment/53111?download=1 "ScreenProduct.JPG") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4NTAtc3R5bGluZy1nYXBzLW9uLXByb2R1Y3QtZGlzcGxheS1iZXR3ZWVuLW1haW4taW1hZ2UtYW5kLXRodW1ibmFpbHM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86326 - Thank you received: 14288 - - 5 years 4 months ago [\#333906](#333906) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Styling gaps on product display between main image and thumbnails](/forum/26-product-category-display/902850-styling-gaps-on-product-display-between-main-image-and-thumbnails#333906 "-- 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 : Code: \#hikashop_image_main_thumb_div, .hikashop_product_main_image { height: auto !important; } [ www.hikashop.com/support/documentation/1...ize-the-display.html](https://www.hikashop.com/support/documentation/153-customize-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](https://www.hikashop.com/home/blog/471-hikashop-4-4-3.html#drag) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4NTAtc3R5bGluZy1nYXBzLW9uLXByb2R1Y3QtZGlzcGxheS1iZXR3ZWVuLW1haW4taW1hZ2UtYW5kLXRodW1ibmFpbHM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")** - [![NiallLeavy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Topic Author - [ Offline](/forum/user/61344-niallleavy) Less More - Posts: 13 - Thank you received: 1 - - 5 years 3 months ago [\#334304](#334304) by [NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Replied by *[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")* on topic *[Styling gaps on product display between main image and thumbnails](/forum/26-product-category-display/902850-styling-gaps-on-product-display-between-main-image-and-thumbnails#334304 "-- 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")* 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4NTAtc3R5bGluZy1nYXBzLW9uLXByb2R1Y3QtZGlzcGxheS1iZXR3ZWVuLW1haW4taW1hZ2UtYW5kLXRodW1ibmFpbHM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 654 - - 5 years 3 months ago - 5 years 3 months ago [\#334317](#334317) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Styling gaps on product display between main image and thumbnails](/forum/26-product-category-display/902850-styling-gaps-on-product-display-between-main-image-and-thumbnails#334317 "-- 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")* 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 :**Code: \#hikashop_image_main_thumb_div, .hikashop_product_main_image { height: auto !important; [b]} After :[/b] Code: \#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: 5 years 3 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). The following user(s) said Thank You: [Valserine](/forum/user/58689-valserine "View Valserine's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4NTAtc3R5bGluZy1nYXBzLW9uLXByb2R1Y3QtZGlzcGxheS1iZXR3ZWVuLW1haW4taW1hZ2UtYW5kLXRodW1ibmFpbHM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")** - [![NiallLeavy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Topic Author - [ Offline](/forum/user/61344-niallleavy) Less More - Posts: 13 - Thank you received: 1 - - 5 years 3 months ago [\#334513](#334513) by [NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Replied by *[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")* on topic *[Styling gaps on product display between main image and thumbnails](/forum/26-product-category-display/902850-styling-gaps-on-product-display-between-main-image-and-thumbnails#334513 "-- 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")* Many thanks Philip - does the job perfectly ! M The following user(s) said Thank You: [Philip](/forum/user/34318-philip "View Philip's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4NTAtc3R5bGluZy1nYXBzLW9uLXByb2R1Y3QtZGlzcGxheS1iZXR3ZWVuLW1haW4taW1hZ2UtYW5kLXRodW1ibmFpbHM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.086 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)