- Posts: 195
- Thank you received: 18
Content Module - Display on mobile
4 years 4 months ago #342243
by Sandra74
Content Module - Display on mobile was created by Sandra74
-- url of the page with the problem -- :
rolex.ahriise.com/rolex/collection/cosmo...-daytona-116506-0002
-- HikaShop version -- : 4.5.1
-- Joomla version -- : 4.1.4
-- PHP version -- : 7.4.29
Hello,
Rolex is asking me to display 2 products on mobile view instead of one (at the bottom of the page, I'm using the content module to display related products).
I didn't find how to achieve this. Could you please help me?
Thanks in advance
Sandra
-- HikaShop version -- : 4.5.1
-- Joomla version -- : 4.1.4
-- PHP version -- : 7.4.29
Hello,
Rolex is asking me to display 2 products on mobile view instead of one (at the bottom of the page, I'm using the content module to display related products).
I didn't find how to achieve this. Could you please help me?
Thanks in advance
Sandra
Please Log in or Create an account to join the conversation.
4 years 4 months ago #342249
by nicolas
Replied by nicolas on topic Content Module - Display on mobile
Hi,
The products listing carousel already switches to 2 elements for some screen widths:
i.imgur.com/di18Mry.png
How to decide when to display one product or two or the number of products you configured in the module depends on the code:
in the file product / carousel you can edit via the menu Display>Views.
As you can read in that code, it will switch to 2 products between a width of 768 and 992px available.
So you can tweak these values there to adapt to your needs, the size of your thumbnails, etc.
For example, if you change 768 by 1, it will always display 2 products on mobile devices but the carousel might go outside of the page's width. So you need to do some tests.
The products listing carousel already switches to 2 elements for some screen widths:
i.imgur.com/di18Mry.png
How to decide when to display one product or two or the number of products you configured in the module depends on the code:
Code:
if($options['dots']) {
$options['responsive'] = '{0:{items:1, slideBy:1, dotsEach: 1}, 768:{items:2, slideBy:'.$slideByFor2.', dotsEach: '.$slideByFor2.'}, 992:{items:'.$products.', dotsEach: '.$products.'}}';
} else {
$options['responsive'] = '{0:{items:1, slideBy:1}, 768:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';
}
As you can read in that code, it will switch to 2 products between a width of 768 and 992px available.
So you can tweak these values there to adapt to your needs, the size of your thumbnails, etc.
For example, if you change 768 by 1, it will always display 2 products on mobile devices but the carousel might go outside of the page's width. So you need to do some tests.
The following user(s) said Thank You: Sandra74
Please Log in or Create an account to join the conversation.
4 years 4 months ago #342273
by Sandra74
Replied by Sandra74 on topic Content Module - Display on mobile
Thank you very much Nicolas!
It works like a charm
It works like a charm
Please Log in or Create an account to join the conversation.
Time to create page: 0.137 seconds