Yith product slider on HomePage

[Nima]

Nima

February 4, 2021 at 6:34 am

Hi,

I need to have WooCommerce product on the home page based on product category. I couldn’t find a way in the theme settings or widgets to do that. So I used YITH WooCommerce Product Slider Carousel Plugin.
The problem is that when I add the shortcode to the home page, an empty row appears (products are not visible!). After checking the CSS I found out that for some unknown reasons, Opacity is 0 for the product slider!
I had to add these in order to see the products on the page:

.ywcps-slider .ywcps-products .hidetheaction {
opacity: 1!important;
width: max-content !important;
}
.woocommerce .ywcps-wrapper ul.products {
margin: inherit !important;
}
.ywcps-products .kt-product-intrinsic img {
max-width: 96% !important;
height: fit-content !important;
}
.ywcps-products .product_item .kad-product-flipper.kt-product-intrinsic {
max-width: 97% !important;
}

Now it looks normal only on wide screens (above 1200px).

Is there anyway to fix this to work normally on all the screen sizes? Or I should set CSS rules for all the different sizes separately?

Thanks,
Nima