Media queries and grid template areas

[OBXKH]

please see

https://codepen.io/OBXJuggler/pen/abLxgEN

this is new and i am still on a learning curve

how do i stop the text from overflowing into other divs?

how best to write a media query to stack one div onto the next?

yes, i tried writing a media query... no luck

kindly provide a codepen of the appropriate code

MANY THANKS!

 

[BigDady]

I would love to just write a media query and have everything magically work for you, but I can't because your basic coding is bad.
I use FireFox to program websites and check in other browsers after I have things the way I like, adding fixes for other browsers as I go.
Two big problems. ONE - the header section and the footer normally does not have that much information (so I cut it down to one line) TWO - your font-size is all over the place. You set it in every div and use ems, rems, pxs. Set size for the entire page in one place and use vws. That way the font shrinks with the page width.

Set the width to 360px and a large gap appears between the menu and the header. Fix that before moving on. The menu width is a lot larger than the page. Make them the same. Style at 360px width and slowly expand the width to look for areas that you need to improve.
From what I see its content 1, 2, 3 that are the problem and CSS Grid should make that behave. Give all that a try and see if you even need a query.

 

[OBXKH]

ultimately i want to thank you.

tough read at first, but necessary for me to follow

a wake up call i desperately needed

and, honestly, I am embarrassed at my mess


simplified

https://codepen.io/OBXJuggler/pen/OJxYZzG

and

https://forallthetime.com/

ok, 1 step at a time

having trouble and need your help

"Set the width to 360px and a large gap appears between the menu and the header. Fix that before moving on"

i tried very hard, but couldn't figure that out...

if its obvious and i missed it, i apologize

this is a learning process for me and i kindly ask for some guidance with proper code