Responsive template image sizes

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!

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.

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.

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

Hi nicolas & mhunter!
Thanks; for me it works this way:
(i added the following lines into frontend_custom)

@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;}