Product Carousel Doesn’t Display Properly on Mobile

I think it will be more helpful to others when they have the same problem as me in the future and can search through the thread on babiato.tech
So I will write here according to the title and question.

I previously wrote here, in my other question to ask and got help with my problem. Thank you @Knights for your help.

https://babiato.tech/threads/show-data-on-product-loop-woocommerce.62831/#post-91698

Click to expand...

I changed the product carousel display with some css code for mobile display.
Generally, on the mobile display it will show 2 products per line (before : https://snipboard.io/zYW1nS.jpg).

And I want to be 1 product + next partial product per line, like here I’m displaying it for mobile display.(after add some css : https://snipboard.io/ecKVzg.jpg)

Normally, when a product is swiped, it will display the next product.
However, I’m having a problem, when the next product doesn’t display properly ( eg: when the carousel starts on product 1, it shifts to product 3 and so on.)

Please see the link below for the screen recording for more details.
(https://we.tl/t-qTjjdXwyRX) or you can see live here (Use Mobile Layout view to check this on desktop – https://bit.ly/3O7l2c)

This is the css code I added

@media only screen and (max-width: 400px) {
.woocommerce ul.products {
margin-left: -10px;
margin-right: -80%;
}
@media only screen and (max-width: 400px) {
.woocommerce ul.products:not(.slick-slider) {
display: list-item;
flex-wrap: wrap;
overflow: scroll;
}

Click to expand...

Thank you in advance.
Really appreciate anyone’s help.

Hi @Knights

Thanks for help.
I've tried replacing as you suggested. But when I replace it, it doesn't change the appearance. Is there a step I missed? Thank you very much for your time

Knights said:

Ah! Yes you are correct. For some reason the theme isn't using those settings. I recommend you use this plugin instead. It seems to be a similar match and has more control over the settings.

• https://babiato.tech/resources/yith-woocommerce-product-slider-carousel.137/

Install and activate the plugin.

Go to --> Admin --> YITH --> ADD NEW PRODUCT SLIDER CAROUSEL --> Configure your settings to match your previous Carousel. Save the slider. You will then find your shortcode. e.g. [yith_wc_productslider id=2525].

Edit your page within Elementor --> Add new a ''Shortcode'' block and paste the ''shortcode''. You can configure the settings easier within YITH --> Settings.

You can then style/change the CSS for the new carousel. Message back if you need help with the styling.

Click to expand...

Hi @Knights

I'm already know the reason why there is no change in the js file when edit.
It's because of different js files location.
As it turns out, it is controlled by the add ons of their built-in plugin theme.

Thanks in advance @Knights for helping with my previous investigation.



Really appreciate you.