Making a slider responsive is what I am trying to accomplish.
Expectation: When I re-size the browser window the slider images should scale
Maybe this is elementary to responsive design, but none of the instructions I could find say so
When I grab the browser window and re-size it my slider images remain the same.
I would like it to work like the slider on this page:
I only have one ‘set’ of slider images at this point.
?- Do I need to create and position additional image versions for each break point? Even so my images should ‘scale’ prior to reaching that break point correct?
Thanks in advance for the help (I been searching for the answer for about 2-hours to no avail).
But you’ll then get a problem with the fixed height of your slider. In the example you refer to, the height of the slider is only set by its content so it doesn’t stay the same height when you resize the browser.
The easiest way for that is to put your image as an image in the slide rather than a background, and remove all height values of the slider, mask, etc. then place your content, if any, on top of the images with position:absolute. Make all your image the same W/H ratio and give them width 100%. That way you’ll get consistency in dimensions across slides.
THANK YOU! I will give it a shot and see how it goes. Also, I will post the results here for others. Seems like a pretty basic concept that should be in the Webflow documentation/tutorials.
