I’m having trouble with the hero section on my website. I want the minimum height to be 100vh, but without a fixed size of 100vh to ensure responsiveness. However, when I set a minimum value of 100vh for the section, the container doesn’t adjust to the full height, causing layout issues. The container only resizes properly when I use a fixed value of 100vh for the section.
Do you have any idea why the container doesn’t take the full height when I set the section’s minimum height to 100vh?
Link: Webflow - Matt Dojo
I probably don’t fully understand the need here but from what I see the main section works to use a min height of 100vh but the interior div (currently set to 100%) does not work. I can only get it to work by setting a 96vh to maintain the bottom margin.
Then, If I shrink the viewport height, the setting is overridden by the content within the div. The cumulative height of these elements won’t allow the div to be this short unless internal scrolling is enabled and overflow is hidden. You can test this by using the settings I’ve outlined and then delete some of the content and test the browser height.
Again, you might need to explain the need for this setting because I’m not sure what you’re trying to achieve.
Thanks for your answer.
I would like the “container-color” div to to take the space of the yellow rectangle:
You will change the height to 100vh. No need for a min height setting in this instance.
’m assuming you want to maintain the border too?
Yes exactly for the border!
I tried with a fixed height, but I have this issue, when the screen size decreases :
Set the min height to around 750px. The inner div with the gradient also needs a fixed height, to accommodate the total height of the content inside.
I see you fixed it up. I’ve never used svh value before. Very helpful to see this!
Yes a friend gaved me some help! Thanks for helping too