Streaming live at 10am (PST)

Slider Navigation/Mask doesn't resize for responsive modes

Hi Gang,
I’m new to webflow and new to repsonsive designs. This is my first webflow site. I’ve searched all day to find anything similar to my problem, so I apologize if this has been answered elsewhere.

Problem: I have a slider in a container on my home page that looks great in desktop mode, but doesn’t re-size properly in any hand-held mode (tablet and down to phone). The images look great - they are all the same size when I imported them and all of them resize proportionally, but the navigation dots and grey mask (?) do not. They get further below the images as you choose a smaller size device. Below are some screen shots. Hope I’ve explained that ok…

Thanks for your time!! - Allen

Here is my public share link: https://preview.webflow.com/preview/dancoproducts?preview=bb3ad65a4e6295c00a15a91dd25a2fc6

Screenshots:


Hello Allen
Here is a step guide for the solution.
Make these changes in Desktop view.

Step one
To get the images to display properly, you should give your slider element a height. Choose Slider and give it a class name. Set the height to your preferred height ( 300px works great on your site )

Step two
Make a class for the images inside of all the sliders. The properties height and width should both be set to 100%

Step three
Don’t give your right arrow and slide nav any class, leave it default.

That should do it

David

Thanks David!! I’ll give that a shot.

David, That did the trick!! Thank you for your time. I had a few stray classes on some objects when I was trying different things yesterday, but soon as I followed your instructions and removed the other classes it worked great! Now the slider mask & navigation adjusts proportionally with the images on each responsive view. Thanks again!

1 Like

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