CMS Slider mobile responsive issues and custom slider dots not working

General
1

Hello everyone,

I’ve implemented a CMS slider on my project, following the steps from this video: (2022) Build a Webflow CMS Slider - No-Code Attributes - YouTube. However, I’m experiencing a major issue when it comes to the mobile breakpoint, where the layout completely falls apart.

Everything seems to be fine with the implementation process, but the problem lies with the collection item - it’s taking up an enormous width. When I use the collection list as a placeholder, as Joe does in the video, it works fine. But, the actual collection list that needs to go inside the slider, or more precisely, its collection item, is extremely wide and it exceeds the boundaries of the screen.

I’ve already taken a look at cloneable examples, but I’m concerned that even your examples for the CMS slider might not be fully mobile-optimized. Here is the read-only link to my project: Webflow - Trena Digital Marketing Website.

I’m looking for assistance in resolving this issue. How do I adjust the width of the collection item so that it doesn’t go outside the screen boundaries on mobile devices?

Also, I have an issue with custom slider dots. I believe I’ve set up everything perfectly but for some reason, it doesn’t seem to work fine. I would appreciate it if you can help me with that as well.

Any help would be greatly appreciated.

Thanks in advance.

2

Hey @dule2208! You can style your .cs_slider-component class to have a max width on your mobile breakpoint, that is how we do it for the CMS Slider page.

For the Custom Dots Attribute, you are missing the script needed to add them, you can find it here

1 Like
3

Thank you very much Luis!

1 Like