So I am currently trying out Webflow and learning about Flexbox at the same time. To help me do this, I am trying to deconstruct and recreate this page: http://www.thisalso.com/projects/google-identity
I feel like I have made some decent progress and I really enjoy Webflow’s interface. However, I am having some difficultly in getting my page to behave like the ThisAlso.com page, especially on mobile. I have the top section(logo and type) in divs with a flex parent that is set to 90vh. This should allow for a small portion of the cat images to “peek up” from the bottom of the page on all breakpoints. Although, we I view the link on my phone or a device emulator, the page scrolls instead of scaling to the 90VH.
Again, I am fairly new to this (a designer not a coder), so I am trying my best through the tutorials and deconstruction to understand how this all works. If someone could take a look at my public link and possibly give me some tips on how I can get this to work correctly, it would be greatly appreciated.
The reason you get scroll on your mobile device – on iOS at least, not sure about Android – is because when setting a height with VH, it doesn’t account for the browser chrome (top bar, address field). Therefore, in your case, your top section of 90vh is getting “pushed” down by the height of the browser chrome.
Thanks for the reply. I guessed as much, but I am trying to figure out how this page does it: thisalso.com is coming soon
When I look at that on my IOS phone it loads perfectly, with a small amount of the content “peeking”. It’s been driving me nuts trying to figure it out. Like I said, I am no developer, so I am limited in my solutions / ideas.
Looking through their code, they’re using this line:
min-height: calc(100vh - 60px)
You can use min-height or height. Min-height would allow for the element to grow in height if the content inside it was longer than the allotted height
The 60px value is to account for the browser chrome most likely. Webflow currently doesn’t allow you to use “calc” in the designer so I’d say your best bet is to:
(A) use a value smaller than 90vh and eyeball until you’re happy with it
(B) place the min-height: calc(100vh - 60px) in the custom code section of your site for the element that you’re trying to apply the style to. Reference on how to do that found here
Hope this helps. Let me know if you need more help after.
Thank you so much! That explains a lot. I really appreciate you taking the time to help out, as this will save me tons of hours trying to figure out “how the hell do they do that?”.
So far I have really enjoyed using Webflow as a designer and being able to learn a bit about code. The forum section and the tutorial videos have been top notch for getting help.