Personal Portfolio Viewport Issue

Hey everyone,

When I set the navbar to position: fixed; to complete all 12 user stories, my #welcome-section was forced under the nav. In order to fix it, I set my #welcome-section to padding-top: 150px; which brought my <h3> and <p> down below the navbar, but it also meant the height of the #welcome-section did not equal the viewport anymore. The page is not completely finished, but any suggestions, advice, feedback is appreciated. Thank you!

Here’s my page: https://codepen.io/fdozza/full/qBqmZJJ

Edit: Resolved

Since you have the height set to 100vh, adding that additional 150px padding on top will make the height 100vh + 150px (because by default the browser uses content-box box sizing) which means it is now taller than the view port and thus the test fails.

You definitely want to keep the padding on the top. What you need to do is figure out a way to reduce the height to compensate for the padding. There are a couple of ways to do this. I have already given you a hint above. See what you can come up with and if you are really stuck you can come back and ask for another hint.

1 Like

@bbsmooth That was just the hint I needed! I was able to set the box-sizing to border-box which fixed the issue and I passed the 12th user story. Thank you!!

1 Like