I need to stop coming to yall for everything but I swear, I do a ton of research before I come post and sometimes I still can’t figure it out on my own. And you guys have really been helping me learn!!
Can someone tell me please what is happening with my text here? My site
I have it set to overflow auto, but it’s cutting off the top of the text on both scroll boxes. Edit: I just edited it a bit and now all my text is in weird columns, oh my. :(
(Also I know the style right now is obnoxiously goofy but I have a vision! hehe) Thank you!!
The content in your main element (as well as in your header, aside and footer) is aligned to the center vertically with align-items: center. Because you also have an overflow: auto on the main element, all text is now aligned around the vertical center and any content that falls outside the main is hidden.
Maybe a solution is to keep the align-items: center only for the header, aside and footer and remove it from main, like so:
Hey there! I’m jumping in here with zero context, but I’ll try my best: There is a CSS rule targeting header, main, aside and footer that sets display to flex, which orders every element as a row. If you don’t want your paragraphs next to each other like that, you could set it to flex-direction: column; either in your “header, main, aside, footer”-rule (or within the “main, aside” rule if you move it below “header, main, aside, footer”)
One other thing to note: grid-template-rows: 10vw 30vw 10vw; is setting the height of the body as a multiple of the width of the window which may not be intended.
And you guys have really been helping me learn!!