Hi @aalve Could you please share the publicly accessible url where you are using the shortcode to get idea of what causing the issue?
Thread Starter
aalve
(@aalve)
Hi Sajjad, I already did.
The page I need help is https;//www.barka.gr at the end of the page is the shortcode for recently viewed products. Please add 1.product to the basket then go back and refresh the homepage. You will.understand what the issue is. The slider height become very big and as you add more products 4 or 5 then it gets normal.
ok, after reviewing it seems the CSS coming from your builder and theme are making full width of the container and slider taking full width for a single product. What you can do is explicitly apply width-height for a single li item so it stays always same.
Thread Starter
aalve
(@aalve)
Hi there,
actually that’s what I can’t do, that’s why I need some help to do it.
So could you please help me how to do that ?
@aalve Please add a class to your that section… for example: recently-viewed-products-section
And add these CSS rules to your site.
.recently-viewed-products-section .et_pb_code_2 {
display: block!important;
}
.recently-viewed-products-section .slick-track {
min-width: fit-content!important;
}
.recently-viewed-products-section .slick-initialized .slick-slide {
min-width: 205px !important;
}
Thread Starter
aalve
(@aalve)
Thank you for helping Hossain, I let you know that I tried what you suggest by let an/or removing my custom css I was using. Tried on desktop monitor 1920×1080 full screen and/responsive.
That did not do the trick. The area became huge !
What I am using right now and almost working:
[woopspro_recently_viewed_products
slide_to_show_for_mobile=’4′ slide_to_show_for_tablet=’4′ slide_to_show_for_laptop=’6′
slide_to_show=’5′]
and some custom css
display: flex !important;
width: auto !important;
flex: 0 0 auto !important;
max-width: 100% !important;
Please help.
-
This reply was modified 2 months, 4 weeks ago by
aalve.
https://prnt.sc/ieTShUpZVf1T
https://prnt.sc/tDNh7F-Fb9DD
https://prnt.sc/8gR_gSl1UjpD
https://prnt.sc/0nnR5K5hyBXL
This is what transformed after applying the CSS I have provided above for you!! It seems you have not applied the CSS to the site yet.
