Media queries and grid template areas


Joined
Feb 15, 2021
Messages
11
Reaction score
0
please see
Code:
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!
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
125
Reaction score
20
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.
 
Ad

Advertisements

Joined
Feb 15, 2021
Messages
11
Reaction score
0
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

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

and

Code:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top