[ Resolved ] Slider Issue - can't figure out how to work it

Design help General
1

I’ve been avoiding the SLIDER for quite some time now…

  • because I can never get images to “fit well”.

I’m back working this issue again.

Why - when you resize the screen - the image(s) can get totally messed up.

SEE VIDEO:
http://quick.as/9Pq9CnJa

I’ve tried placing an image in the mask-image itself… tried using a div… tried using the section.

Can get any of them to work correctly.

PUBLIC LINK:
https://webflow.com/design/rev-pqc-v6?preview=f7be145e92efc72283d73412617c3469

2

For what I see, the image behave exactly how it has been told to: always fill the width.

But to begin with, you’re using image)-backgrounds, not images, so that’s the first issue. When you want to display an image, add it with the image widget. Then set its properties in the settings tab. Backgrounds are for backgrounds and in Webflow come with useful presets like the one you’re using:

http://vincent.polenordstudio.fr/snap//Webflow_-_rev-pqc-v6_2015-02-03_18-25-38.jpg

But it’s intended for backgrounds.

Now what do you want to image to do? To keep filling the width, but at the same time remaining centered in height?

3

crud

  • I was hoping - you wouldn’t say that - and instead tell me I was doing it wrong :frowning:

I’ve tried it with an image direct on the slide

  • in a section
  • in a div
  • in the image widget…

all do “about the same” - but create the same effect - issue I’m complaining about.

If it’s doing what it’s suppose to do… then basically I need it do something different.

I just changed the project to use the image widget again.

When the image expands to the width of the window… it can cut off the bottom part of the image.

Basically… when you have a large screen… the image resize to the width the screen (which it’s suppose to do) - but then the height of the image doesn’t change to match the image.

What you can get then - is a floating head (of a person)… basically a partial image.

I wish there was a way to resize / reposition the image dynamically. This can be done via bootstrap / jquery. But I’m trying to keep this a pure webflow solution.

What can do done to fix that - and stay in webflow ?

updated: http://quick.as/wkA6Tw8W![|690x292](upload://vTkQvTmgSlP7JIgEYNlI6bpqbmq.png)

1927×723 1.28 MB
1928×712 1.62 MB

4

Ok I tried quickly but I have to go and couldn’t find anything. Maybe we need JS here and I’m not good at it. Try to find the CSS answer to that in google, then apply it in webflow.

5

Thanks Vincent… I think I just figured it out.

Need to play with the CCS code a little more to tweak it… make sure the values are right.

Basically… the image expand to the full screen now… so nothing is ever cut off.

Will post results when done.

6

ok… here it is… It’s actually a rather simple fix. I’m ashamed to say.

Doing it this way… you don’t have to class the IMAGE WIDGET, the SLIDE, or the MASK.

You only need to class the SLIDER element.

The IMAGE WIDGET seems to automatically COVER the parent elements FULL HEIGHT and FULL WIDTH…

So… simply class the SLIDER itself and set the HEIGHT to 100%.

Like I said… easy.

I’ve been fighting this SLIDER for 2 months and getting my (Y#F(USTT##)&!R#* kicked.

If you don’t know what (Y#F(USTT##)&!R#* k means…

  • it’s French. I think every language has an equivalent translation.

On really wide screens… the output is a really tall element though.

I tested this on a 1920 and a 2560 monitors. Lots of scrolling involved.

It also pushes the IMAGE SELECTOR buttons way down the page…

but this is what I would rather see.

Video of Original Issue: http://quick.as/vkXxTvGl

Video with Fix: http://quick.as/vkXxTvGl

2 Likes