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?
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.