//SOLVED// Personal Portfolio Story #10 Viewport=Welcome Section

[WilJonze]

#welcome-section{
  height: 100vh;
  width: 100%;

I am failing Story #10 : The height of the welcome section should be equal to the height of the viewport.

However, shouldn’t it be passing given the way the code is written? I am not sure what I’m missing?

Link to all of the code:

Profile Page

Thanks in Advance!!

[kinome79]

Well, I got the test to pass, but it messed up your layout a little bit, so you’ll have to play with it.

Basically I noticed the test values were only off by 6px. Yours was bigger than it was supposed to be.

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 470 to be close to 464 +/- 0

So I started removing margin and paddings, but found that what fixed the test was removing the borders from the wecome-section class.

  border-style: solid;
  border-color: black;

After removing those two lines the test passed, so based on your box-sizing I’m guessing it adds to the size of the section. Now after removing that the opaque black no longer goes to the top, so you’ll have to play with that… but as I need to step away at least wanted to share what I found.

[kinome79]

Oh, since I mentioned box-sizing… I also was able to fix it by changing welcom section to border-box by adding this line to it.

box-sizing: border-box;

If you’ve never heard of that, look it up… it determines whether padding and borders adds to the size of a section, or if it gets placed inside of the section… I always prefer border-box because other methods don’t seem logical to me. By adding that to your welcome-section, the borders don’t increase the size, so you can keep your border statements.

[WilJonze]

box-sizing: border-box;

Yep! added that line and it works, without changing the layout!

I’ll be making sure I understand what box-sizing means right now!

Thanks!