Need help with mobile optimizing my site

[mahoroa]

Hi! So lately I've been wanting to mobile optimize my site (https://schrodingersbakeneko.neocities.org/) but I'm struggling to figure out what to do. Heres a wireframe I made for the mobile design. I'm just not sure how to make it look like this on mobile. Any help is appreciated!

[Bede]

If you haven't already, I recommend this guide on mobile design! It's a great place to get started, especially because it goes pretty in-depth, with coding snippet examples.

[mahoroa]

If you haven't already, I recommend this guide on mobile design! It's a great place to get started, especially because it goes pretty in-depth, with coding snippet examples.

Hi! Sorry Im just now replying to this, I was busy with college and blah blah blah. But thank you! I'll def give it a read when I'm on break. Thank you sm!

[varve]

Heh, that's pretty similar to my website layout.

The only special thing I had to do to make it work on phones is add a breakpoint for the menu across the top, so below a certain viewport width it switches to a collapsible dropdown menu. Feel free to steal my CSS if it looks like what you're trying for! (Only the front page has a sidebar, the rest are one column layout.)

Oh the other thing is, don't specify width for the main body, specify max-width. That way it can shrink on smaller screens.

HTML almost has to be forced into non-responsive layouts - but that's been so normalized that people forget that it's easier to just... not do that? And let the text flow according to screen size?