Will somebody please explain how to make this responsive?

HTML-CSS
1

https://codepen.io/toooortoise/full/BaLLOdO
Hi FCC community
I worked on this in Sublime editor and checked the whole time my work in chrome where it looks good only in full sized browser on my monitor. I know this is = fail. I know some principles of responsiveness but find it really hard to apply them. I am new to coding. I know this is a lot to ask but hopefully somebody will take the time and tell me how to make this responsive? I don’t need a solution only… in order to learn I need detailed explanation if possible. I have already watched a lot of videos on YouTube and got back to FCC responsiveness classes but to no avail. There is something flying over my head. Thank you and I appreciate any input.

2

  • If you start by using min-height instead of height on the sections (or remove the height when not needed) the sections will at least be able to contain their content.

  • For the nav and footer, you might be able to use flex-wrap, otherwise, you will have to create some media queries and switch the direction to column (and/or any other adjustments needed).

  • For the font sizes you can again use media queries, or you can have a look into the clamp function.

1 Like