Slider Images in Different Views

This is working perfectly except I get too much “mask” in tablet and phone views.

https://preview.webflow.com/preview/shit-2?preview=0c04c7126734a41cc3528e40709fa308

Can anyone tell me the STEPS to remove this low hanging mask without my whole site blowing up?

Hi @hutchman61, It looks like your slider’s height is set. Try using auto when designing for a responsive slider (see attachment)

Also, this demo may be helpful for general responsive slider style settings:
Demo: https://webflow.com/website/Demo-Kit
Page Title: Responsive Slider

​I hope this helps! :slight_smile:

PS: please include screenshots showing design issues so we can help you faster :smile:

No dice…still looks like this in other views despite being on “auto”

@thewonglv’s steps work – Make sure you don’t have heights set on the slider itself, the mask, and the slides in it (you do have heights currently on all three, randomly across various viewports), also, take the 5px padding off of the bottom of the slider that you have set on the portrait phone viewport.

that should fix it :smile:

1 Like

Great, that worked. NOW how do I had a third slide without destroying the whole slider?
https://preview.webflow.com/preview/shit-2?preview=0c04c7126734a41cc3528e40709fa308

Glad it worked.
That preview link doesn’t work fyi :smile:
To add a new blank slide select the slider, go to the settings tab, click new slide (as shown below)

OR

To duplicate an existing slide, select the one you want to duplicate from the navigator tab and press the duplicate button at the bottom of the screen (as shown below)

Lastly

You can also further orientate yourself with sliders by checking out the sliders documentation here

Hope this helps mate! :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.