Personal Portfolio Layout issues

HTML-CSS
1

Hello hello,

so I’ve been trying to make a write bare bones personal portfolio website, so I can get all the user stories right and then elaborate on it gradually. I’m stuck with the user stories concerned with the layout of the page, specifically:

2. The height of the welcome section should be equal to the height of the viewport.

The height of #welcome-section is not equal to the height of the viewport : expected 420 to be close to 290 +/- 1

3. The navbar should always be at the top of the viewport.

Navbar’s parent should be body and it should be at the top of the viewport

I did my best to look at topics opened by other FCC users but I couldn’t manage
Codepen link
[https://codepen.io/syk5/full/yLpVymz]

2

Hi @syk5
For nr. 2, instead of using pixels (px) you can make use of vh (viewport-height). I think of it as percentage, so 100vh would correspond to the entire viewport height. (In this particular challenge, I recall the test-system behaving a bit special because it can give you a “not passed” if the height of your “welcome-section” AND your “navigation bar” it too high/low.) So, you will want to add specifics for the height in both your navbar and your welcome section if adding height="100vh" to your welcome-section is not enough.

For nr. 3. You need to either use #navbar in the CSS code (instead of .navbar) or add class="navbar" to your navbar html code as well. This in combination with changing it to top: 0; should work:

#navbar {
    top: 0;
    position: fixed;
  display: block;
}
1 Like
3

Hello syk5
You need to set the height of your welcome section with vh (viewport) units.
which is just referring to the size of the screen.

#welcome-section {
height: 100vh;
}
1 Like
4

Properties and values are separated with a colon, not a semicolon (you have top; 0;)

1 Like
5

thanks! turns out my mistake was writing “.navbar” and “.welcome-section” in CSS. After having changed that full stop to a hashtag, and added the vh unit instead of px I passed the test. Made my day!

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.