Flex box items going outside the main section

Can anyone tell me why my title text goes outside of the page when it is on smaller screen sizes? I have the flex set to column and flex end. so when i shrink the screen size it flexes upward, but how do i keep it from going outside of the section? thanks!! Or is there a better way to get the quote to stay in the bottom corner and the title up high?

https://codepen.io/ethan-reynolds/full/MWbYPdQ

What you are looking for is the flex-shrink: property for the flex items in the .welcome-section-main class. In combination of using vw units for font size so they also automatically resize.

But personally I would set up a @media for certain screen sizes and avoid flexbox altogether.
e.g. under 800 px, reduce html font size by 25% (easy to do if all your font size is in rem, you only need to change the size in html selector), and expand the width of the subtitles to 80%.
Also, it maybe better to use a unit such as rem, or px for the size of your welcome-section-main class. using vh here creates the odd behavior of truncating the content when you resize vertically.

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