[Solved] Problem with Finsweet's CMS Slider: slides overflowing screen size on mobile devices

Hello, I am currently creating a Webflow website and I have been implementing the sections as I go along. I have almost finished the site, but when I published it, I realized that a section I had implemented at the beginning was no longer working properly.

The section that is no longer working is a “CMS Slider” section using the Finsweet component (v1). The section still works on PCs and tablets, but no longer works on mobile devices.

Using my site backups, I was able to revert to an earlier version of my site where the slider works. However, I spent a lot of time comparing the old version of the slider (which works) with the current version of my slider (which doesn’t work anymore), and I really can’t see where my problem is coming from. I can’t find any differences…

Here is a read-only Webflow link to the old version with the slider working (replace the * with t because as a new user of the forum, I don’t think I can post links…) h*tps://preview.webflow.com/preview/wfm5---certification-site-9b9a6a?utm_medium=preview_link&utm_source=designer&utm_content=wfm5---certification-site-9b9a6a&preview=e00868db056a6c6bfb8119ff7f31a95e&workflow=sitePreview

And here’s how the slider behaves on the published site (take a close look at how it works on the mobile version): h*tps://wfm5---certification-site-9b9a6a.webflow.io/

And here is the read-only Webflow link for the current version of the site: h*tps://preview.webflow.com/preview/wfm5---certification-site-2a041f0464e66?utm_medium=preview_link&utm_source=designer&utm_content=wfm5---certification-site-2a041f0464e66&preview=b6edb14ab22758162692a05312f84cd7&workflow=sitePreview

And the behavior of the slider on the published site: h*tps://wfm5---certification-site-2a041f0464e66.webflow.io/

Description of my issue: In the old version of the slider, on the mobile version, the slides obeyed the slide size I had given to the slider mask. On the current version, the slides exceed the screen size, making it impossible to navigate the slider correctly. I can’t understand why the slides exceed the screen size on the current version.

Note: on the old version of the slider, please ignore the “View details” overlay, as I hadn’t finished implementing it on the old version of the site.

Can you help me find the source of my problem, please?

Thank you by advance !

Jean-Baptiste

Hi Jean-Baptiste,

To ensure your slider displays correctly on mobile devices, follow these steps:

  1. Apply the same base class to all slider slides
  2. In the Style panel, set the width to 33.33% for desktop breakpoint
  3. Switch to mobile breakpoint (click the mobile icon in the top navigation)
  4. Set the width to 100% for mobile view

You can add unique combo classes to individual slides for specific styling while keeping the base class settings intact. To test your slider’s responsiveness, click the preview icon in the top-right corner of Designer and drag the canvas edge to simulate different screen sizes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

The AI answer doesn’t resolve the issue, as a slide width limit is set in both version of my website.

My problem is, for some reason, in the current version of my website, the slides exceeds this width limit on mobile version, and I can’t understand why.

Thank you by advance for your help !

EDIT : problem solved, it originated from a class (padding_section_large) that I had inadvertently modified by changing the display to Flex, whereas it was initially set to Block, causing the overflow. Thanks to Francesco Castronuovo for pointing this out!