Problem with Slider Mask Height

[melissak]

I’m trying to use flex box to get a header with a slider under it that together take up 100% of the browser height. It appears to work, but the mask within the slider doesn’t expand with the slider so the content gets cut off.

I start with a div or section and set it to 100vh, turn on flex box and set to vertical. Then drop in my navbar and then the slider. Then I set the slider to expand. It looks right, but if I select the slider mask, it’s still the original slider size (300px I think). I’ve added an image to confirm it.

http://tonic-designs.webflow.io

It seems to be specific to that setup because when I set the slider itself to 100vh, the mask expands with it and looks nice. However, I’m trying to get the header navbar in there too.

Any suggestions?

[melissak]

Any help here would be appreciated

[cyberdave (Dave S.)]

Hi @melissak, thanks for the question and for hanging in there. One thing that would really help, is to share the read-only link to the site: Share a read-only link | Webflow University. Let us know what page the slider is on.

In general, you set the slider height to be Auto, so that the slider is at least as tall as the content within and then set the mask to 100%/100vh and the slide to also fill 100%/vh of the mask.

Thanks in advance!

[melissak]

Here’s the link: Webflow - Tonic Designs

I don’t want the slider height to be determined by the content. I’m going to make the content fit the slider, which is determined by browser vh.

There’s only one page - home.

Thanks!