HTML & CSS Personal Portfolio Page User Story #10: The height of the welcome section should be equal to the height of the viewport

Hi guys,

I am really having a hard time with passing the final test on the Personal Portfolio Page. Could you please tell me what I am doing wrong? I really appreciate the feedback. I have attached my codepen: https://codepen.io/ach0319/pen/zYBYxwj

Thank you so much,

Ashley

Welcome to the community!

To better help everyone with future projects, be sure to include the cdn script at the top of the HTML for each project:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Makes it much easier to test within the code.

For the issue, you have the welcome section equal to 65% of the height of the viewport instead of 100%, but that isn’t the only issue. You also have some other modifiers inside the welcome section that are adding extra spacing. If you’re concerned about the top part of the welcome section getting covered up, I would recommend adding the padding to an outer element (for example, the body).

I hope this helps!

Thank you so much, that script was really helpful. I tried to add the padding to the body but shrank the design in. I adjusted the viewport to 100vh but I am still not passing the test. Could the spacing I have added to each section be impacting it as well?

It might be.

When I hit “run tests” in the script, I can view the tests that were done by clicking on the “11/12” or whatever it is afterwards, and it’ll give a breakdown of each test. When there’s an error, it’ll usually give a reason of what it was expecting or something else.

For this one, I looked at the “expected [number] to be [number]” and saw how far off it was. If there’s some other spacing, you can tell based on the difference between the two numbers.

Good luck!

Thank you so much! I figured out that the borders I placed in each section was impacting the viewport height and it passed! I am so excited it passed. I really appreciate your help.

1 Like