Seriously, Please Help. Welcome section must be the same height as the viewport

HTML-CSS
1

Hello all,

I’m in this code hell where when I fix one issue I break something else. For the Portfolio Page challenge I’m struggling with points 10 and 11.

10 says - The height of the welcome section should be equal to the height of the viewport

11 says - The navbar should always be at the top of the viewport.

So when I fixed the navbar issue with position: fixed;
then the viewport height broke.

When I fix the viewport height the navbar position is no longer fixed.

PLEASE HELP ME I’m losing my mind

https://codepen.io/csilass/pen/RmEvWY?editors=1100#0

2

If you remove padding-top: 30%; then all tests passes.

#welcome-section {
  ...
  //padding-top: 30%;
}

You also may have a look at margins at h1: it has browser-default-values and I’m not sure whether they are wanded

2 Likes
3

If you replace the padding on #welcome-section with a bit of flexbox it should look the same and pass the test.

Remove all padding declarations from the #welcome-section selector and add this to it:

display: flex;
flex-direction: column;
justify-content: center;
4

Bless your beautiful soul oh my goodness