Close

How to set JCarousel trending products to be two products in mobile view?

ahmedfaramawy
one year ago
#14222 Quote
Avatar
  • 2
Hi,

I would like any one to help me to let the trending products in mobile view two products in each row. the defaulst is one product in each row.

Regards,
Mahran
hristo
one year ago
#14226 Quote
Avatar
  • Moderator
  • 119
ahmedfaramawy wrote:
Hi,

I would like any one to help me to let the trending products in mobile view two products in each row. the defaulst is one product in each row.

Regards,
Mahran



Hello,

you have to edit this setting in your administration (you can find it under "all settings"):

jcarouselgeneralsettings.responsivebreakpointsforslickslider-pavilion

Use the filter to find it and then look at its value. The default value should be this one:

[{"breakpoint":890,"settings":{"slidesToShow":3}},{"breakpoint":711,"settings":{"slidesToShow":2}},{"breakpoint":425,"settings":{"slidesToShow":1}}]

You have to change 425 to 300.

This will render 2 products on small screens for all carousels on your site. There is no way to make this change to affect only the "Trending" carousel, it will affect all.
Regards,
Hristo Gospodinov
Nop-Templates.com
ahmedfaramawy
one year ago
#14229 Quote
Avatar
  • 2
works as a sharm. thanks Nop-Templates for your 5 start support.
toanhnt
8 months ago
#14944 Quote
Avatar
  • 34
Hi,

How to yo set 2 products per row on mobile? I was able to set it in version 3.9 by change
@media all and (min-width: 481px) to @media all and (min-width: 480px), but it does not seem to work on current version 4.1
nikola.dragiev
8 months ago
#14947 Quote
Avatar
  • Moderator
  • 151
Hello,

If you follow the steps that my colleague described above you can achieve that. The best way to change the number of items is with the settings in the administration, not with CSS.

hristo wrote:

Hello,

you have to edit this setting in your administration (you can find it under "all settings"):

jcarouselgeneralsettings.responsivebreakpointsforslickslider-pavilion

Use the filter to find it and then look at its value. The default value should be this one:

[{"breakpoint":890,"settings":{"slidesToShow":3}},{"breakpoint":711,"settings":{"slidesToShow":2}},{"breakpoint":425,"settings":{"slidesToShow":1}}]

You have to change 425 to 300.

This will render 2 products on small screens for all carousels on your site. There is no way to make this change to affect only the "Trending" carousel, it will affect all.


P.S. Of course, I assume that we are talking about the jCarousel Plugin since the forum post is about it. If you want to change the number of items per row in the product grids, not in carousels maybe you can write in another topic or submit a ticket throughout our ticketing system.  
Best regards,
Nikola Dragiev
Nop-Templates.com