Streaming live at 10am (PST)

Slides displaying strangely

I’m new to Webflow and to web design in general, so please forgive me if I’m making an obvious mistake.
I’m working with sliders, adding a different background image to each slide. Sometimes the slide will mysteriously stop displaying, or look like it’s trying to nest itself above or below the slider, or even slightly off center in the slider. If I change the height of the slide to 100%, it will sometimes solve the problem, but not always. I have also tried changing the display properties, but to no avail. Here’s the public link:

The slider giving me trouble at the moment is on the page called “origin”, first slider, second and third slide. I’m not sure how to link directly to that in the public link, sorry.

@kamalcon Try to duplicate your work and set your origin page as a home, enable the public link and you can share it here. You might not need to duplicate your work to only switch your home page but just in case.

Ok, thanks @pastiwibawa ! Here’s the new link:

Hi @kamalcon Sorry to say that I have no idea what happened to your ‘Origin’ page but your FIRST slider on it, which visually has 4 slides, recognized as only has 3 slides.

Guess you need to make a new one for it. But, if I may suggest you for your sliders.

First. Make things clear and concise. I mean, I would give each elements a name that show clearly what it is. See example image below.

Or if you have more than one sliders, you can set class name as ‘myslider1’. For me it is a good practice that will help me to avoid ‘chaos style’ because what happens to myslider1 will stay at myslider1. And always set properties only after you set a class on an element. Be careful using same nested classes through many elements.

Second. Once you have elements structured for your slider, we can work out easily with its content’s positions. Note that I did not do much on slide1 since it is only stay on the left. So here are head-slide1 and para-slide1 properties.

But, let’s have a look on slide2. The result will be like this

Notes that I only used ‘Align Right’ for head-slide2 to make it stay at right, but I used ‘float: right’ for para-slide2 to make it stay at right.

The reason I show you this is that we need to be careful to use float (with this structure) that it can affect element that directly below it. Like image shown below. As I set ‘float: right’ for head-slide2, para-slide2 ‘moved’ even I set its ‘float: right’ (It didnt stay at right as I expected).

So, in this case, if we really need to set head-slide2 ‘float: right’ we can add a Div block that its function is like a ‘wrapper’.

Last thing I can say here is that structure is important here and to make each element’s class as unique and concise as possible is also crucial. Using nested class is good but when things gone weird, we may better stay safe by set each elements with ‘unique’ class.

Well, that’s my 2 cent which obviously does not much.


1 Like

@pastiwibawa Thanks for your help! That one slide is supposed to be only visible on mobile, so it’s ok. But thank you for your advice about class structures, you are right that I have been working “chaos style.” I’m trying to use unique classes now and it’s working!

1 Like