Viewport Height - Portfolio Website

HTML-CSS
1

I am unsure how to make sure I complete the following requirement form the portfolio website project as part of the Responsive Web Design certificate. Below is the listed requirement:

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

Can someone provide direction/explanation for what is being asked?

2

You should make the height of the welcome section (the section with the id welcome) to 100% of the height of the viewport so that when you resize the height of the page it should still take up the whole of the viewport.

3

And that is what I did in my code but it keeps saying I didn’t pass the requirement. See my project: https://codepen.io/dodsonj66/pen/MWmjMPj. What am I missing?

4

Paddings increase the height, you have a padding-top of 4rem, so your welcome-section is in total 100vh + 4rem.

You can either remove the padding, or add box-sizing: border-box to the welcome-section.

5

Thanks. I didn’t realize they would add together!

6

You can also use margin-top instead.

But using box-sizing: border-box is better. You can do it on just the element but I would suggest you apply it to all elements. Size calculations are just simpler that way.

*,
*:before,
*:after {
  box-sizing: border-box;
}
7

You need a id of “profile-link”

8

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