Well, it turned out very well.
For anybody interested in 2 col layout with mobile...
I have one module (carousel enabled!) with image size 260x364px (biggest possible image with list output).
Page Container max-width 1366px.
Original image size 600x840px
For golden ratio take into account, that there will be data and buttons below the product image.
Therefore the size I have chosen should do fine.
With Display > View > YourTemplateName > product > carousel.php
$slideByFor2 = $this->params->get('one_by_one') ? 1 : 2;
$slideByFor3 = $this->params->get('one_by_one') ? 1 : 3;
if($options['dots']) {
$options['responsive'] = '{0:{items:2, slideBy:2, dotsEach: 1}, 420:{items:3, slideBy:'.$slideByFor3.', dotsEach: '.$slideByFor3.'}, 768:{items:'.$products.', dotsEach: '.$products.'}}';
} else {
$options['responsive'] = '{0:{items:2, slideBy:2}, 420:{items:3, slideBy:'.$slideByFor3.'}, 768:{items:'.$products.'}}';
}
And CSS for responsive product image and badges:
/* <><><><><><><><><><><><><><><><><><><><><><><><><>
DO NOT TOUCH CODE BELOW
hikashop - module product list
<><><><><><><><><><><><><><><><><><><><><><><><><> */
/* hikashop - module product list - image responsive */
.hikashop_module .hikashop_product_image,
.hikashop_module .hikashop_product_image_subdiv {
width: 100% !important;
height: auto !important;
}
/* <><><><><><><><><><><><><><><><><><><><><><><><><>
DO NOT TOUCH CODE BELOW
hikashop - module product list
<><><><><><><><><><><><><><><><><><><><><><><><><> */
/* hikashop - module product list - badge responsive */
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topleft_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topright_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomleft_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomright_div img {
width: 100% !important;
height: auto !important;
}
/* hikashop - module product list - badge responsive */
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topleft_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topright_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomleft_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomright_div {
width: 20% !important; /* whatever value is set with module */
height: auto !important;
}
This will show:
Phone-Portrait: 2 col
Phone-Landscape: 3 col
Tablet: 5 col
Dektop: 5 col
Happy.