Mobile responsive layout with Module> Carousel

-- HikaShop version -- : HikaShop Business: 2.2.3
-- Joomla version -- : 3.2.1

I am trying to setup a carousel slid of "New item / Hot item" at the shop front-page. Since I am using Joomla 3 with T3 Framework, the site layout is full responsive and will adjust automatically for difference screen size (including mobile device). However, I found the "Hikashop Module" in this condition will not react correctly with responsive design (mobile) since especially when I am trying to use Module> Parameters for DIV> Enable carousel. All image thumbnail are hardcoded as below:

<div id="hikashop_slideshow_fade_hikashop_category_information_module_126" class="hikashop_main_carousel_div hikashop_subcontainer thumbnail" style="padding-bottom:0px; padding-top:0px; overflow:hidden; width:340px; height:170px; position:relative;"><div class="product_slide" style="width:340px; height:170px; position:absolute; top:0; left:0;z-index:3;"><div style="margin: 10px; height:150px; width:150px;float:left; "><div class="hikashop_fade_effect" id="window_1" style="margin: auto; text-align:center; cursor:pointer; height:150px; width:150px; overflow:hidden; position:relative" onclick="window.location.href = '/main/zh/marketplace/home/product/1-akb-cd-very-good-title'">

The width are hardcoded (even I leave the height and width blank for image size within "Parameters for DIV> Enable carousel" and it's not automatically adjust to a proper size.

For example, the "new items" module showing items in 4 column and 4 items per page, sliding horizontally using Carousel. When I am using a mobile device to view the site, (eg: screen width = 480px) the module will run off from the screen (size over 480+)... My other components will be able to adjust to a proper screen size by adjusting the image size (eg: from 150x150px adjusted to 80x80 automatically) .. Anyway to do this or I need to wait Hikashop module to have response (screen size) design in future release?

Thanks.

Hi,
I think that a solution can be to use Media queries through your CSS file, here is a thread where you'll find an example :

You can do the modifications in the frontend css file via the menu Configuration > Display > CSS
Use the @media tags to change the width of the columns when the width of the page is less than xx.

ex:
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}

Here is some documentation about the layout customization:
www.hikashop.com/support/documentation/1...ize-the-display.html

Hi,

Do you guys plan on making the sliders responsive any time soon?

Sorry to jump on an old thread. But i have a problem displaying the carousel as well and was wondering if this fix could fix my issue. My site is www.sofasurmesure.com . thanks

Hi,

The carousel is not yet responsive, so using the @media query to hide the carousel on small screen resolution is still a good solution.

Well i don't want to hide it. I just want it to stretch as the rest of the page

Hi,

It will require code editions, the carousel is managed by JavaScript so we can't just use css properties to make it responsive.
It's on our TODO list.

Is there an update for stretching the carrousel.
Or would another theme fix the issue (like Jollyany)