[Solved] Build a Personal Portfolio Webpage : Error viewport

[Solved] Build a Personal Portfolio Webpage : Error viewport
0

Hi the freecodecamp community,

I have a problem with a “Box Test” error that quotes:

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

And then the error code
The height of #welcome-section is not equal to the height of the viewport : expected 471 to be close to 380 +/- 1 AssertionError: The height of #welcome-section is not equal to the height of the viewport : expected 471 to be close to 380 +/- 1 at s.H (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:262:7459) at s.e.<computed> [as approximately] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:325:126) at Function.n.approximately (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:224:4043) at r.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:37961) at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31608) at o.f.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544) at m.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37114) at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37976 at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36426) at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36495.

I searched but I did not find, I used a small Javascript code which is: https://github.com/freeCodeCamp/testable-projects-fcc/issues/97

And the CSS, I find in some subjects but I tried everything but I did not find anything.

I think that comes from the Bootstrap problem or something else?

I let you look at my page on CodePen:
https://codepen.io/n23dev/pen/YamEGN

I thank you and your help.

The problem is with

#welcome-section {
  height: 100%;
)

When you set the height to 100%, it is set to 100% of the height of the parent element.

Your 2 options to fix this are to set the height of html and body 100%, or to use vh.
vh stands for “viewport height”. It is used like percent (out of 100), so height: 50vh is half of the viewport height.

Hi Lucas,

That’s what I did (see line 20 of CSS) of my page :

# welcome-section {
   height: 100%;
)

But unfortunately it does not work … That’s why I’m posting here.

Thank you and good evening

he was saying it should be ‘100vh’.

Off topic:
Green words hard to read. Green background for links great!

Thank you for your help and I have solved the problem.