Slider overflows when adding another slide

I have a slider that contains text slides. Once I add a 4th slider (simply duplicating slide 3) makes the whole thing bust out to the right.

I’ve tried different overflow settings for the slider, the mask, all individual slides – and even the parent divs and section. But nothing makes the slider stay in bounds.

Any ideas? Thanks! :pray:

Here is my site Read-Only: [LINK][1]

you have to set the width to 100% on several containers and the slider height to 100%.

Hi Christoph!
I hope you are well.

I found a solution for your slider.

First of all, you have a lot of stacked blocks which are often not very useful. You could create class combos instead of creating a block for each container parameter, margins etc. This would allow you to have a clearer and more readable HTML structure.

Here are the modifications I made to your header section:

  1. Here is the structure

  2. Here are the parameters of the div “your padding”, width 100% and padding in rem and not in %.

  3. Here the “slider 2” style

  4. No style for the “Mask 2” class

  5. No style for the “slide 1” class (and others “slide X”)

  6. Here is the style of the “H1” class, display block !

Now, if you want to add slides, go to the slider settings “slider 2” and click on “add slide”.

If you notice that your text is too long, you can set a height in px on “slider 2”
Example in tablet breakpoint

I hope this helps! This is one solution among others!

Have a nice day!

Thanks @Stan!

I don’t quite understand how 100% width setting would have an impact if the parent is contained? But just in case I’ve just changed that. The result is still the same unfortunately. :man_shrugging:

I don’t see any slider height set to 100%. Where do you see that?

Thank you @zbrah! :smile: I’ll try to work through this.

Just rebuilding another slider since playing with this one messed up all others too. :see_no_evil: :grin:

1 Like

Thanks again @Stan & @zbrah – I think I’m going to give up on these sliders. I simply don’t get what’s happening. :weary:

sorry to hear @Christoph that even the video on how to didn’t help. Good luck on your developer journey.

1 Like

Thank you @Stan - and thanks again for taking the time to help! Luckily just occasionally building sites for my own projects…

I just rebuilt the section simpler, with fewer divs, to force myself to understand how this happens. And it happened again – as soon as I add a 4th slide it breaks out…and I have no idea why. Gonna mess around with it for a bit…but I’m not giving myself much longer! :grin:

hi @Christoph I see that you follow Finsweet “client first” but even though I like Finsweet’s addition to the community the"client first" is IMO not the best way to build or learn to build websites. Client first is IMO more for agencies to have a unified approach across many projects to be able easy move from project to project without discovering how and what. It is in some way like Bootstrap.

Yeah, thanks for that opinion. I just briefly looked into Finsweet. It’s nothing that I’m very familiar with. I always have issues to put together a clean build with class hierarchies that don’t get messy at some point.

So, for this build I decided to start with some of the Relume components – which is why I ended up with so many divs nested into one another at some point. Probably going to build from scratch again next time.

“This is the way”