I feel like understanding the flexbox css will help you immensely here and remove the need for setting height and width for most of your sections. Is there a reason you choose not to use it, though?
For example, I set #content to use
display: flex; justify-content: space-evenly
and removed the width/height of its children and opted to use
I removed most lines that set width and height to a fixed px and then I set #page to display:flex; flex-direction: column;
At smaller sizes, the content will be squished too close together, so at 400px I made #content have the flex-direction: column property. You can decide where the breakpoint happens though, and change the margins a little bit afterwards.
I updated my codepen to show the changes. I changed some margins and such but that's not as important.
I feel like understanding the flexbox css will help you immensely here and remove the need for setting height and width for most of your sections. Is there a reason you choose not to use it, though?
For example, I set #content to use
display: flex; justify-content: space-evenlyand removed the width/height of its children and opted to use
flex-grow: 1(this makes them fill available space) and here's what it looks like now:
codepen.io/ianteoyy/pen/yLOYzrO
Thanks so how do I modify the CSS to make it responsive? When I make the page smaller it doesn't scale correctly.
I removed most lines that set width and height to a fixed px and then I set #page to
display:flex; flex-direction: column;At smaller sizes, the content will be squished too close together, so at 400px I made #content have the
flex-direction: columnproperty. You can decide where the breakpoint happens though, and change the margins a little bit afterwards.I updated my codepen to show the changes. I changed some margins and such but that's not as important.
Thank you so much! I've been struggling with this for like a month!
No problems! But yeah flexbox makes float mostly obsolete, and it's a lot less headache. Definitely worth learning.
Can u help with this other page? :)
dev.to/lolleri200/the-text-won-t-s...