-
The MOST FRUSTRATING project so far of the certfication, but I definitely learned from my mistakes
-
Easy part : Making everything look nice like borders, background, HTML structure
-
Hard part : to position the navigation and the text-content.
-
Temporary fix : I eventually had to use relative and absolute positioning to get the job done
-
The ACTUAL SOLUTION for the problem of positioning would be like this:
- in HTML we have a
divwhich containsnavandmain - in CSS make the default positions to be mobile first, use
flex-direction: columnsonavon top andmainon bottom - we want everything to fit the full viewport so let
bodybe 100vh (meaning 100% of viewport height) - and let
#container(havingnavandmain) be 100% height - we also want the
navandmainto be vertically scrollable so setoverflow-y: autofor them in CSS
<body> <div id="container"> <nav></nav> <main></main> </div> </body>
body { height: 100vh; } #container { display: flex; flex-direction: column; height: 100%; } nav, main { overflow-y: auto; }
- Then add a media query for larger screens, use
flex-direction: rowsonavon left andmainon right
@media(min-width: 1000px) { #container { display: flex; flex-direction: row; } }
- in HTML we have a
aldrinseanpereira / fcc-technical-documentation-page Goto Github PK
View Code? Open in Web Editor NEWmini project of the RWD certification
Home Page: https://aldrinseanpereira.github.io/fcc-technical-documentation-page/
License: Apache License 2.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent