Please help me with my understanding of Height: Auto specifically with regards to section (or any Div for that matter).
I’m experiencing 2 issues of frustration.
A large part of the issue is: ‘I don’t know what I don’t know’, and therefore I keep seeing the same problem and not the solution!! (I’m Irish, so that may not make sense)
Anyways, here’s the link to my project: https://preview.webflow.com/preview/nzsparklingwater?preview=dafea40f48bc56009da14357c703d901
The issues are specifically related to the Hero Section.
Desktop viewport I’m happy with - Section adjusts as expected.
Tablet Viewport I’m happy with - Section adjusts as expected.
Landscape Mobile - Need I say more!
Portrait Mobile - Ok, I said more!!
The 2nd Issue…Actually, I’ll post a separate message to keep this thread on topic.
Any help, direction, feedback always greatly appreciated.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Height auto means that it will calculate the height of the element regarding it’s content.
As you are using flexbox it will use the height of the element instead to adjust the height of the children to fit.
Problem is that text element have a font-size which is not relative to their parent. Therefore when the element shrink, the text don’t do so and start overflowing out of its container.
I think (considering the design you are trying to achieve) you should deal with the space in your cards with padding and margin instead of flex items which can shrink.
Anyhow for this question as your other one I would definitely recommend you go play with this awesome project
It is really a good way to understand flexbox behaviour and use it in your layouts.
Really appreciate you helping me out here (and my other question).
I’ve played the Flexbox game a few times, usually ok until about level 26. I’ll play again and keep pressing to get a full grasp of the power of Flex.