-
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
div
which containsnav
andmain
- in CSS make the default positions to be mobile first, use
flex-direction: column
sonav
on top andmain
on bottom - we want everything to fit the full viewport so let
body
be 100vh (meaning 100% of viewport height) - and let
#container
(havingnav
andmain
) be 100% height - we also want the
nav
andmain
to be vertically scrollable so setoverflow-y: auto
for 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: row
sonav
on left andmain
on right
@media(min-width: 1000px) { #container { display: flex; flex-direction: row; } }
- in HTML we have a
AldrinSeanPereira/fcc-technical-documentation-page
mini project of the RWD certification
HTMLApache-2.0