Responsive Design Help Without Frameworks

HTML-CSS
1

Howdy, folks!

I’m building my website and want to make it responsive without the use of any frameworks. I’m curious what is the best way to go about this. I’m planning to design the website similar to the popular scroll-down layout that I see others using for their portfolio. My current idea is to wrap all the div elements in a flexboxes to be easily resized on smaller devices, and to redesign the nav bar for smaller devices.

Here is a rough drawing of how I plan to do it: https://imgur.com/a/6ZUE7Ne
edit to add the above website isn’t mind, it’s just a screenshot of a random template that is similar to how I want my layout

Is this a good way, or is there a better way to go about doing it?

Cheers!

2

You’d be using a lot of media queries so you can define the properties of your tag for different width breakpoints.

Avoid hardcoded values… i.e. 14px, 300px, because these hardcoded values do not scale up or down. Use percentages, and em units.

3

Thanks for that tidbit. I’ve been playing around with media queries quite a bit, so I’m prepared for that. However, my general question is if I should nest the entire body in a flexbox for the layout, or if there was any conventional methods/tricks.

4

Yes, wrap all flex items in a flex container.

This site may be useful to you.