[Skip to main content](#vessel-content) # Responsive template image sizes ## - **[mhunter](/forum/user/9679-mhunter "View mhunter's Profile")** - [![mhunter's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/9679-mhunter "View mhunter's Profile") Topic Author - [ Offline](/forum/user/9679-mhunter) Less More - Posts: 43 - Thank you received: 1 - - 13 years 10 months ago [\#82113](#82113) by [mhunter](/forum/user/9679-mhunter "View mhunter's Profile") *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#82113 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* was created by *[mhunter](/forum/user/9679-mhunter "View mhunter's Profile")* I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of problems but still have one I need help with please. I fixed the problem of the product display page right part being overlapped by my main product image in the left part by forcing the right part onto a separate line for screens below a certain size. I inserted this code in the frontend CSS and now the product options and add to cart button etc move underneath the main image, which looks OK: @media only screen and (max-width: 640px) { .hikashop_product_left_part{ width:100% } On my category product listing pages my thumbnail images were expanding out of their containers and overlapping each other at smaller screen sizes because I had increased the general thumbnail size to 175px in the configuration display. So this is not really a fix but I solved my issue by reverting back to thumbnails of 100px. My remaining problem is that on my main category pages I want the image thumbnail sizes to be bigger at 200px (there are six categories currently displayed in 3 columns 2 rows). However, in smaller screen sizes, although the photos get smaller, the image containers have a big white space between the photo and the bottom bottom of the container box (see attached). It would maybe be OK if I could force the display for mobile screens to show just 2 columns instead of 3? Can anyone tell me the code to make that happen please? Or offer an alternative solution to remove the white space just on these pages? Thanks! - [ ![category-boxes.png](/forum/attachment/7578) ](/forum/attachment/7578 "...gory-boxes.png") [ ](/forum/attachment/7578?download=1 "...gory-boxes.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 13 years 10 months ago [\#82404](#82404) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#82404 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Hi, We introduced in HikaShop 2.0 some responsive rules in order to be compatible with the new philosophy of Joomla 3.0 We made some tests of our views for classical uses. The product listing use the image thumbnail height in the div. It means that 175px would be allocate for the image height. But the responsive listing would automatically resize the image because there is too few width. So, it generates the blank height. If you removed the forced height, at this moment, your cells could not have the same size (if your images does not have the same ratio). It could break your design. The idea could be to change screen rules, in order to switch from the columns mode to the row mode before the "smartphone" size. Code: @media (max-width: 767px) { Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[mhunter](/forum/user/9679-mhunter "View mhunter's Profile")** - [![mhunter's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/9679-mhunter "View mhunter's Profile") Topic Author - [ Offline](/forum/user/9679-mhunter) Less More - Posts: 43 - Thank you received: 1 - - 13 years 10 months ago [\#82590](#82590) by [mhunter](/forum/user/9679-mhunter "View mhunter's Profile") Replied by *[mhunter](/forum/user/9679-mhunter "View mhunter's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#82590 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Thanks, I think that's one option, but I'm not clear on your instructions on how to do this. Where do I type that code please? If I show in 1 or 2 columns then it looks OK on the smallest screen sizes, but what I really want to do is to have the border box (div??) and image margins resize to fit the image. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 13 years 10 months ago [\#82620](#82620) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#82620 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Hi, If think that, if you remove the thumbnail height option (set it to "0"), your problem would be solve. With just have the thumbnail width, HikaShop would not set the height in the HTML so the responsive design would be better. Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. The following user(s) said Thank You: [mhunter](/forum/user/9679-mhunter "View mhunter's Profile"), [yfrolov](/forum/user/28656-yfrolov "View yfrolov's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[mhunter](/forum/user/9679-mhunter "View mhunter's Profile")** - [![mhunter's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/9679-mhunter "View mhunter's Profile") Topic Author - [ Offline](/forum/user/9679-mhunter) Less More - Posts: 43 - Thank you received: 1 - - 13 years 10 months ago [\#82621](#82621) by [mhunter](/forum/user/9679-mhunter "View mhunter's Profile") Replied by *[mhunter](/forum/user/9679-mhunter "View mhunter's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#82621 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Thanks, Jerome, that didn't work, but I have just before you responded found a solution that works for me to display the page in a single column for small screen sizes only. In my front-end CSS I added the following (where 132 and 112 are the ID numbers of my menu and module for the categories I have displayed): @media only screen and (max-width: 640px) { \#hikashop_category_information_menu_132 div.hikashop_category, #hikashop_category_information_module_112 div.hikashop_category { width: 100% !important; } Not sure if that's the best solution but it seems to work OK for now. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 13 years 10 months ago [\#82761](#82761) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#82761 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Hi, I will made some test in some local J3 websites and see if this fix works fine for everyone. If so, your patch would be added directly in HikaShop. Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[mandrael](/forum/user/12577-mandrael "View mandrael's Profile")** - [![mandrael's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12577-mandrael "View mandrael's Profile") - [ Offline](/forum/user/12577-mandrael) Less More - Posts: 8 - Thank you received: 2 - - 12 years 11 months ago [\#133730](#133730) by [mandrael](/forum/user/12577-mandrael "View mandrael's Profile") Replied by *[mandrael](/forum/user/12577-mandrael "View mandrael's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#133730 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Hi! I have the same problem, but the solution doesn't work for me. I inserted the code into frontend_custom.css, but nothing happens. Could you tell me, how to fix the img width exactly? I have 170px pictures both for categories and products. I attached 2 pics. First is showing the problem, huge space below category/product-images. Second shows the code. **If I change the "170px" with Firebug to "auto", everything works fine, also in smartphone-size!** So the only question is: how can I change this permanently? The 170px are produced via php-file in "/components/com_hikashop/views/category/tmpl/" Where can I cange the fixed height into a simple "auto"? Thanks, Michael - [ ![h64daf13.png](/forum/attachment/13911) ](/forum/attachment/13911 "h64daf13.png") [ ](/forum/attachment/13911?download=1 "h64daf13.png") - [ ![hfcb8189.PNG](/forum/attachment/13912) ](/forum/attachment/13912 "hfcb8189.PNG") [ ](/forum/attachment/13912?download=1 "hfcb8189.PNG") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/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: 86323 - Thank you received: 14283 - - 12 years 11 months ago [\#133749](#133749) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#133749 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Look at the CSS code proposed by mhunter: @media only screen and (max-width: 640px) { \#hikashop_category_information_menu_132 div.hikashop_category, #hikashop_category_information_module_112 div.hikashop_category { width: 100% !important; } That code will only apply to the hikashop_category div if the id of the module displaying it is 112. So you need to change the id in the CSS if you want it to apply to your module/menu. Regarding the height, you can always override it with the !important CSS trick like that: hikashop_category_image{ height: auto! important; } The following user(s) said Thank You: [mandrael](/forum/user/12577-mandrael "View mandrael's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[mandrael](/forum/user/12577-mandrael "View mandrael's Profile")** - [![mandrael's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12577-mandrael "View mandrael's Profile") - [ Offline](/forum/user/12577-mandrael) Less More - Posts: 8 - Thank you received: 2 - - 12 years 11 months ago - 12 years 11 months ago [\#133780](#133780) by [mandrael](/forum/user/12577-mandrael "View mandrael's Profile") Replied by *[mandrael](/forum/user/12577-mandrael "View mandrael's Profile")* on topic *[Responsive template image sizes](/forum/2-general-talk-about-hikashop/76758-responsive-template-image-sizes#133780 "I'm trying to make my Hikashop product images behave with my responsive template but I understand that HS 2.0 is not yet fully responsive? In case it helps someone else, I have solved a couple of...")* Hi nicolas & mhunter! Thanks; for me it works this way: (i added the following lines into frontend_custom) Code: @media only screen and (max-width: 640px) { #hikashop_category_information_menu_104 div.hikashop_category { width: 100% !important;} #hikashop_category_information_menu_104 div.hikashop_product{ width: 50% !important;} #hikashop_category_information_menu_104 div.hikashop_subcontainer{padding-top: 10px;} } .hikashop_category_image{height: auto !important;} .hikashop_product_image{height: auto !important;} Michael Last edit: 12 years 11 months ago by [mandrael](/forum/user/12577-mandrael "View mandrael's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzc2NzU4LXJlc3BvbnNpdmUtdGVtcGxhdGUtaW1hZ2Utc2l6ZXM/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.085 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)