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

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.

works as a sharm. thanks Nop-Templates for your 5 start support.

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

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.



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.