Streaming live at 10am (PST)

Slider Navigation/Mask doesn't resize for responsive modes


#1

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:




#2

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


#3

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


#4

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!


#5

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