▼
Streaming live at 10am (PST)

Difficulty Making 100vh flexbox containers

#1

Hi!

I would like to make a site where every single section fills the entire page, so that navigating it feels like moving through a slideshow. I seem to be able to get 75% there though. If I make the central containers fit 100vh, then the contents in the containers go up into the other sections. If I make the sections 100vh, then they cut off major content. What is the trick to make the container shrink to fit the section it's in, and have the section fit the entire screen, regardless of the screensize? Is this possible, and is there a setting I am missing?

Thank you!

Here is my public share link: LINK
(how to access public share link)

#2

Hi Zach!
Nice design!

Any element will be ruled by the components inside, so if you have a larger text, maybe it will have to be larger than the screen size.

Here are some tips:
- Instead of having your text inside containers, which have a fixed width, you can replace those by a Div Block and play with padding, using % - that will distribute the space and give it a more fluid behaviour.
- Also you can use vh or vw units for your text size

Overall it is a matter of using fluid measures instead of pixels and finding the right balance between text and screen sizes :wink:

#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.