Trouble with smaller screen view


I have been completing my projects while being completely oblivious to how they present on a mobile screen!
it wasn’t till yesterday when I had a look at my 3rd and 4th project on my phone, did I realize how distorted my projects appear. If you can help me fix the positioning of my elements, where they don’t overlap, that would amazing!

Project 4:
1). my header overlaps my body contact and is moved to the top of the screen when on a smaller display, rather than being on the left side while displayed on a desktop screen.
2). my body content seems to only display up to less than half the page.

My Code:

Project 3:
This one is truly messy :frowning: ! Any suggestions to get it to stay in its original format (in desktop view) while on a mobile screen?

1). The navbar is off
2). Some of the body elements are no longer centred
3). The logo and text is cut off from the navbar

My Code:

I have attempted to fix it multiple times but I believe I just made a bigger mess lol so any help is very much appreciated!

For both of these I would recommend that you sort of start over with your CSS but this time start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then you can gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.

Basically, start narrow and then work your way out.


Thanks for the reply!
I ended up editing it on my phone. So, I can see the smaller screen display as I go, and I managed to get my elements more aligned that way.