Mobile responsive layout with Module> Carousel

  • Posts: 43
  • Thank you received: 2
8 years 4 months ago #139045

-- 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.

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1774
8 years 4 months ago #139057

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

Please Log in or Create an account to join the conversation.

  • Posts: 392
  • Thank you received: 0
8 years 3 months ago #140503

Hi,

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

Please Log in or Create an account to join the conversation.

  • Posts: 75479
  • Thank you received: 11747
  • MODERATOR
8 years 3 months ago #140566

Not in the short term as it's quite complex to do in order to take into account all the settings of carousels. We'll probably have to redo the code completely.
The simplest for you is to configure several carousel modules and display/hide their main DIV in CSS based on the width of the screen with a @media query.

Please Log in or Create an account to join the conversation.

  • Posts: 86
  • Thank you received: 3
7 years 9 months ago #165946

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

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2320
  • Hikashop Business
7 years 9 months ago #165957

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.

Please Log in or Create an account to join the conversation.

  • Posts: 86
  • Thank you received: 3
7 years 9 months ago #166039

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

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2320
  • Hikashop Business
7 years 9 months ago #166126

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.

Please Log in or Create an account to join the conversation.

  • Posts: 86
  • Thank you received: 3
7 years 4 days ago #201791

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

Please Log in or Create an account to join the conversation.

  • Posts: 75479
  • Thank you received: 11747
  • MODERATOR
7 years 3 days ago #201877

Hi,

We didn't work on that yet. We're focusing on other areas for now since you can already find alternatives out there.
If you want a responsive carousel, some templates come with one built-in and there exists plenty for Joomla, with some of them directly integrating with HikaShop:
www.joomlack.fr/en/slideshowck/slideshow-hikashop-plugin
dj-extensions.com/dj-mediatools
www.gavick.com/news-show-pro
www.joomlaworks.net/extensions/commercial/frontpage-slideshow

Please Log in or Create an account to join the conversation.

Time to create page: 0.104 seconds
Powered by Kunena Forum