[Skip to main content](#vessel-content) # Product image in mobile too large ## - **[spytech](/forum/user/10534-spytech "View spytech's Profile")** - [![spytech's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/10534-spytech "View spytech's Profile") Topic Author - [ Offline](/forum/user/10534-spytech) Less More - Posts: 92 - Thank you received: 6 - - 4 years 8 months ago [\#339571](#339571) by [spytech](/forum/user/10534-spytech "View spytech's Profile") *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#339571 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* was created by *[spytech](/forum/user/10534-spytech "View spytech's Profile")* -- url of the page with the problem -- : [ deborahblyth.com](https://deborahblyth.com) -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: [ deborahblyth.com/rings/jewelry/the-venus-ring](https://deborahblyth.com/rings/jewelry/the-venus-ring) The code shows the height of 670 as inline css: <div class="hikashop_product_main_image_thumb hikashop_img_mode_classic" id="hikashop_image_main_thumb_div" style="height:670px;"> I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. <div style="<?php if(!empty($divHeight) && !$this->config->get('image_force_size',true)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image"> Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) 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 - - 4 years 8 months ago - 4 years 8 months ago [\#339580](#339580) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#339580 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hello, Unless we're mistaken, you're not using the HikaShop frontend template at all, and so you have to know that **responsive commands** are in HikaShop frontend css file. Now, on this specific case you can unset the container div with this kind of command : Code: div#hikashop_image_main_thumb_div { height: unset !important; } And, in order to restrict this command only when it's required here phone screen Code: @media only screen and (max-width: 600px) { div#hikashop_image_main_thumb_div { height: unset !important; } } Here, the "**600px**" value is just an example, define where it fits your needs. Learn more about the "**@media**" command, **[ here](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)**. Regards Team HikaShop Last edit: 4 years 8 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=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[spytech](/forum/user/10534-spytech "View spytech's Profile")** - [![spytech's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/10534-spytech "View spytech's Profile") Topic Author - [ Offline](/forum/user/10534-spytech) Less More - Posts: 92 - Thank you received: 6 - - 4 years 8 months ago - 4 years 8 months ago [\#339587](#339587) by [spytech](/forum/user/10534-spytech "View spytech's Profile") Replied by *[spytech](/forum/user/10534-spytech "View spytech's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#339587 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hi, thanks for that, it solved my issue but only on the main image, as soon as I click a different variant, like gold or silver the css changes to hikashop_image_main_thumb_div_22 adding '_ and a number' how do I control all of these numbers? Thanks. Last edit: 4 years 8 months ago by [spytech](/forum/user/10534-spytech "View spytech's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) 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 - - 4 years 8 months ago [\#339598](#339598) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#339598 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hello, Then, we think that the quickest move for solve your responsive issue is to use the default HikaShop frontend css. Now, if you have remove this css file on purpose, if you detail why maybe we can guide you to another way to proceed. Regards Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[Valserine](/forum/user/58689-valserine "View Valserine's Profile")** - [![Valserine's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/58689-valserine "View Valserine's Profile") - [ Offline](/forum/user/58689-valserine) Less More - Posts: 22 - Thank you received: 1 - - 4 years 7 months ago [\#340612](#340612) by [Valserine](/forum/user/58689-valserine "View Valserine's Profile") Replied by *[Valserine](/forum/user/58689-valserine "View Valserine's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#340612 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hi, I know that i should open my own thread but you gave me a part of the solution for my case, here, Philip. I applied your code about media in my frontend custom css and it works great for the main image. unfortunately it doesn't apply to the image of my variants (characteristics) i tried the following command but it doesn't change anything : @media only screen and (max-width: 600px) { div#hikashop_image_variant_thumb_div { height: unset !important; } i guess i have to replace the word "variant" but by which word ? thanks. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) 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 - - 4 years 7 months ago - 4 years 7 months ago [\#340613](#340613) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#340613 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hello, In order to get your required element class you can use your **navigator inspector tool**, follow me step by step : **1.** Point your element (in your case after the variant thumbnail is displayed) **2.** **right-click** => **Inspect** (inspector tool from navigator to another) **3.** This will open a new window will display your **page Html**, and with it your pointed element **class**. Hope this will help you to adapt your code. Regards Last edit: 4 years 7 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[Valserine](/forum/user/58689-valserine "View Valserine's Profile")** - [![Valserine's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/58689-valserine "View Valserine's Profile") - [ Offline](/forum/user/58689-valserine) Less More - Posts: 22 - Thank you received: 1 - - 4 years 7 months ago [\#340627](#340627) by [Valserine](/forum/user/58689-valserine "View Valserine's Profile") Replied by *[Valserine](/forum/user/58689-valserine "View Valserine's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#340627 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hello That's what i did. In fact in the first (the main image) it is written : <div class= "hikashop_product_main_image_thumb.... id="hikashop_main_image_thumb_div"> and for the variant image : <div id="hikashop_main_image_div_155.. so i wrote in the frontend custom : @media only screen and (max-width: 600px) { div#hikashop_image_main_thumb_div_XXX { height: unset !important; } but it doesn't change anything again. and it seems to be the same thing which Spytech described. but i use the hikashop frontend. i give you the link example (may be i am not good at reading with the inspector code) : [ example with variants](https://glue-note.com/boutique/objets/collages/art_postal) regards Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[Valserine](/forum/user/58689-valserine "View Valserine's Profile")** - [![Valserine's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/58689-valserine "View Valserine's Profile") - [ Offline](/forum/user/58689-valserine) Less More - Posts: 22 - Thank you received: 1 - - 4 years 7 months ago [\#340635](#340635) by [Valserine](/forum/user/58689-valserine "View Valserine's Profile") Replied by *[Valserine](/forum/user/58689-valserine "View Valserine's Profile")* on topic *[Product image in mobile too large](/forum/26-product-category-display/903999-product-image-in-mobile-too-large#340635 "-- url of the page with the problem -- : deborahblyth.com -- HikaShop version -- : 4.4.5 -- Joomla version -- : 3.10.6 -- PHP version -- : 7.4.25 Hi, I have an issue where my product image has a set size of 670px in all views. When in mobile the block it sits in is still 670px and then takes up too much white space: See here in mobile, you will see lots of white space below the image: deborahblyth.com/rings/jewelry/the-venus-ring The code shows the height of 670 as inline css: I have noticed that in the file 'show_block_img.php' it takes the image size and adds 20px. This is fine for desktop but how do I make it work for mobile? In the Product page image (width x height) it only allows one value and not a sepertae one for mobile. ")* Hello again in fact i found the perfect solution in this [ thread](https://www.hikashop.com/forum/product-category-display/902850-styling-gaps-on-product-display-between-main-image-and-thumbnails.html) thank you for your help. enjoy your sunday The following user(s) said Thank You: [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM5OTktcHJvZHVjdC1pbWFnZS1pbi1tb2JpbGUtdG9vLWxhcmdlP3RtcGw9bWFya2Rvd24=) 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.101 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)