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..
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.
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!
