Slider 3 column 33.33% issue shifting images

Design help General
1

Hi,

Having a slight issue a 3 column slider, with each slide at 33.33%. Height of slider is 100% all images added are 800px x 800px.

It was all working fine on desktop, mobile and tablet until today the image are shifting about leaving the grey background colour.

There is two sliders in the inspiration page that have the issue.

Can anyone pinpoint the issue?

Thanks

Here is my site Read-Only: https://preview.webflow.com/preview/scb?utm_source=scb&preview=f84781f7beeeefb5efbfbb96fb4adc14

2

24
242702×1276 770 KB

3

I find it easier to debug looking at source. Could you share your published URL?

4

Just set .slide-rb background-color: #fff; Your seeing the background color from the div.w-slider which is set to #ddd

5

Hi, Thanks for that .

However that doesn’t solve the problem.

The three image should sit flush together with no gap, that is why I have set the slider to 33.33%. As you can see, even when changing the bk to white the layout of the images are not sitting correctly.

11
112692×1106 698 KB

6

The width of the slider is 100%. On my laptop that was 3200 pixels. So 800px X 3 - less than that width.

The images will not grow larger than they are physically. The div.w-slider.slide-rb will grow to fill up the width available.

You will have to define the width of the div.w-slider.slide-rb or its parent container to stop the default behavior of a block which is 100%.

7

I placed the slider in a container and that has solved the issue.

Thanks

8

Could you mark this as solved?