Getting content to take up 100% of it's parent?

Hello Friends!
Currently working on this project and am just about to wrap it up!

https://preview.webflow.com/preview/future-commerce-site-a24138fe3ebc02a610?utm_medium=preview_link&utm_source=designer&utm_content=future-commerce-site-a24138fe3ebc02a610&preview=30ff9be8c5e317f7aee8026ad147cbf7&workflow=preview

https://future-commerce-site-a24138fe3ebc02a610.webflow.io/

I’m currently having an issue with this CMS content in my “section-cms-slider” not taking up 100% of the slider element on some slides.

I used Finsweets CMS slider option, which is working great, but not all slides are the same size and that does not look good.

Slides taking up all the space :slight_smile:

Slide not taking up all the space :frowning:

What element have I missed applying the correct styles to get this undesired effect? Any help is greatly appreciated cheers.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

So after fiddling with it for a bit, I think this comes down the fact there is no set height on any of the slider’s parent elements, which means even when height:100% is declared it will only ever be as tall as its content.

I would try sticking a height:90vh or similar on the slider somewhere, and maybe switch the container for the slider item/download report button to be grid instead of flex. The slide could be in a row of 90% height and the button in a row of 1fr, or something like that. Best of luck.

1 Like