[Skip to main content](#vessel-content) # Adapt Photo block heignt ## - **[Elegantia](/forum/user/61651-elegantia "View Elegantia's Profile")** - [![Elegantia's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61651-elegantia "View Elegantia's Profile") Topic Author - [ Offline](/forum/user/61651-elegantia) Less More - Posts: 8 - Thank you received: 0 - - 4 years 11 months ago [\#337512](#337512) by [Elegantia](/forum/user/61651-elegantia "View Elegantia's Profile") *[Adapt Photo block heignt](/forum/26-product-category-display/903576-adapt-photo-block-heignt#337512 "-- url of the page with the problem -- : www.elegantiastore.fr/index.php/fr/product/308-robe-nataly -- HikaShop version -- : 4.4.4 -- Joomla version -- : 3.10.3 -- PHP version -- : 7.4.24 -- Browser(s) name and version -- : Chrome Hi, I'm a CSS begginer yet and therefore I encounter a difficulty to adapt the main photo block depending on the screen width. When I'm on a large screen, the miniatures below the main picture appears right below it -> Great :) When I'm on a smaller's screen version, smaller the screen, bigger the distance between the picture and the miniatures. -> Not great :( This because of the standart height of the picture's bloc that is fixed. : Is it possible to have a responsive bock that adapt to the picture 's height so that the scrool arrows appear in the middle of the pic and the miniatures right at the bottom ? Where to write this code ? Thanks for your answers !")* was created by *[Elegantia](/forum/user/61651-elegantia "View Elegantia's Profile")* -- url of the page with the problem -- : [ www.elegantiastore.fr/index.php/fr/product/308-robe-nataly](https://www.elegantiastore.fr/index.php/fr/product/308-robe-nataly) -- HikaShop version -- : 4.4.4 -- Joomla version -- : 3.10.3 -- PHP version -- : 7.4.24 -- Browser(s) name and version -- : Chrome Hi, I'm a CSS begginer yet and therefore I encounter a difficulty to adapt the main photo block depending on the screen width. When I'm on a large screen, the miniatures below the main picture appears right below it -> Great ![:)](/media/kunena/emoticons/3.png ":)") When I'm on a smaller's screen version, smaller the screen, bigger the distance between the picture and the miniatures. -> Not great ![:(](/media/kunena/emoticons/22.png ":(") This because of the standart height of the picture's bloc that is fixed. : Code: element.style { height: 570px; } Is it possible to have a responsive bock that adapt to the picture 's height so that the scrool arrows appear in the middle of the pic and the miniatures right at the bottom ? Where to write this code ? Thanks for your answers ! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM1NzYtYWRhcHQtcGhvdG8tYmxvY2staGVpZ250P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) 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 11 months ago [\#337529](#337529) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Adapt Photo block heignt](/forum/26-product-category-display/903576-adapt-photo-block-heignt#337529 "-- url of the page with the problem -- : www.elegantiastore.fr/index.php/fr/product/308-robe-nataly -- HikaShop version -- : 4.4.4 -- Joomla version -- : 3.10.3 -- PHP version -- : 7.4.24 -- Browser(s) name and version -- : Chrome Hi, I'm a CSS begginer yet and therefore I encounter a difficulty to adapt the main photo block depending on the screen width. When I'm on a large screen, the miniatures below the main picture appears right below it -> Great :) When I'm on a smaller's screen version, smaller the screen, bigger the distance between the picture and the miniatures. -> Not great :( This because of the standart height of the picture's bloc that is fixed. : Is it possible to have a responsive bock that adapt to the picture 's height so that the scrool arrows appear in the middle of the pic and the miniatures right at the bottom ? Where to write this code ? Thanks for your answers !")* Hello, Quite strange because I see that you have the HikaShop 4.4.4, and despite everything, this problem that you reported to us is in our minds corrected ... Maybe you have the first build of HikaShop 4.4.4 and the fix is ​​in a higher build? ... Can you update to see if that fixes your problem? Awaiting your returns to going more far in your subject. Regards Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM1NzYtYWRhcHQtcGhvdG8tYmxvY2staGVpZ250P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Elegantia](/forum/user/61651-elegantia "View Elegantia's Profile")** - [![Elegantia's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61651-elegantia "View Elegantia's Profile") Topic Author - [ Offline](/forum/user/61651-elegantia) Less More - Posts: 8 - Thank you received: 0 - - 4 years 11 months ago [\#337593](#337593) by [Elegantia](/forum/user/61651-elegantia "View Elegantia's Profile") Replied by *[Elegantia](/forum/user/61651-elegantia "View Elegantia's Profile")* on topic *[Adapt Photo block heignt](/forum/26-product-category-display/903576-adapt-photo-block-heignt#337593 "-- url of the page with the problem -- : www.elegantiastore.fr/index.php/fr/product/308-robe-nataly -- HikaShop version -- : 4.4.4 -- Joomla version -- : 3.10.3 -- PHP version -- : 7.4.24 -- Browser(s) name and version -- : Chrome Hi, I'm a CSS begginer yet and therefore I encounter a difficulty to adapt the main photo block depending on the screen width. When I'm on a large screen, the miniatures below the main picture appears right below it -> Great :) When I'm on a smaller's screen version, smaller the screen, bigger the distance between the picture and the miniatures. -> Not great :( This because of the standart height of the picture's bloc that is fixed. : Is it possible to have a responsive bock that adapt to the picture 's height so that the scrool arrows appear in the middle of the pic and the miniatures right at the bottom ? Where to write this code ? Thanks for your answers !")* Hi, Thanks for your quick answer. I checked and when I update the new version, it comes back to normal. Though I realised it is a modification I made in :media/com_hikashop/css/style_default.css. There I adapt the products to 2 colums in line 169: Code: .hkc-xs-12, .hkc-xs-11, .hkc-xs-10, .hkc-xs-9, .hkc-xs-8, .hkc-xs-7, .hkc-xs-6, .hkc-xs-5, .hkc-xs-4, .hkc-xs-3, .hkc-xs-2, .hkc-xs-1, .hkc-sm-12, .hkc-sm-11, .hkc-sm-10, .hkc-sm-9, .hkc-sm-8, .hkc-sm-7, .hkc-sm-6, .hkc-sm-5, .hkc-sm-4, .hkc-sm-3, .hkc-sm-2, .hkc-sm-1, .hkc-md-12, .hkc-md-11, .hkc-md-10, .hkc-md-9, .hkc-md-8, .hkc-md-7, .hkc-md-6, .hkc-md-5, .hkc-md-4, .hkc-md-3, .hkc-md-2, .hkc-md-1, .hkc-lg-12, .hkc-lg-11, .hkc-lg-10, .hkc-lg-9, .hkc-lg-8, .hkc-lg-7, .hkc-lg-6, .hkc-lg-5, .hkc-lg-4, .hkc-lg-3, .hkc-lg-2, .hkc-lg-1, .hkc-xl-12, .hkc-xl-11, .hkc-xl-10, .hkc-xl-9, .hkc-xl-8, .hkc-xl-7, .hkc-xl-6, .hkc-xl-5, .hkc-xl-4, .hkc-xl-3, .hkc-xl-2, .hkc-xl-1{ width: 50%; } The goal is having 2 columns of products on secreen, but it creates, i realise, the described problem ! IS it possible to overcome this ? Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM1NzYtYWRhcHQtcGhvdG8tYmxvY2staGVpZ250P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) 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 11 months ago - 4 years 11 months ago [\#337609](#337609) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Adapt Photo block heignt](/forum/26-product-category-display/903576-adapt-photo-block-heignt#337609 "-- url of the page with the problem -- : www.elegantiastore.fr/index.php/fr/product/308-robe-nataly -- HikaShop version -- : 4.4.4 -- Joomla version -- : 3.10.3 -- PHP version -- : 7.4.24 -- Browser(s) name and version -- : Chrome Hi, I'm a CSS begginer yet and therefore I encounter a difficulty to adapt the main photo block depending on the screen width. When I'm on a large screen, the miniatures below the main picture appears right below it -> Great :) When I'm on a smaller's screen version, smaller the screen, bigger the distance between the picture and the miniatures. -> Not great :( This because of the standart height of the picture's bloc that is fixed. : Is it possible to have a responsive bock that adapt to the picture 's height so that the scrool arrows appear in the middle of the pic and the miniatures right at the bottom ? Where to write this code ? Thanks for your answers !")* Hello, No, we don't think that this come from this custom css command. But did you try to update your HikaShop version as I invite you to process previously ? **=> If, yes** can you confirm that this change nothing to your current issue. Another point to check, this setting : [ ![alt](https://i.ibb.co/4WzgrbZ/thumbnail-width.png) ](https://i.ibb.co/4WzgrbZ/thumbnail-width.png "alt") This will **force** your image size, and if it's **not required** the most simple is to remove it, and basically use directly an image with the good size maybe. **BUT** if for a reason or another it's required, then you can use this custom css command to, as you say overcome this display issue : **.hikashop\_product\_page div#hikashop\_image\_main\_thumb\_div { height: unset !important; }** **Note :** That the class "**.hikashop\_product\_page**" is to **restrict** the css command to the required context, here the **product page**. Hope this will allow you to solve the issue. Regards Last edit: 4 years 11 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDM1NzYtYWRhcHQtcGhvdG8tYmxvY2staGVpZ250P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) 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.078 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)