Stuck on last challenge for portfolio project

HTML-CSS
1

Hi , i have spent days trying to figure out how to make my #welcome-section the same size as the viewport. but still keep getting this on #layout
2. The height of the welcome section should be equal to the height of the viewport.
AssertionError: The height of #welcome-section is not equal to the height of the viewport : expected 420 to equal 261
i changed my padding-top on the .intro section & got a pass but it didn’t work for full screen. i have also tried different @media but i think i’m missing something . love some help?
Richard

2

Please show us some code,
so that we can help you.

3

Hi!
I do my portfolio project too.
You can use viewport units (vh)

4

Please share your codepen.
Usually you should try height set to 100vh (making sure you defined the viewport)

5

HI this is my codepen: https://codepen.io/richardh93/pen/VBygdg

6

Hi This is my code pen: https://codepen.io/richardh93/pen/VBygdg
i shall set height to 100vh & try it out

7

HI there, i used vh & managed to get a pass but it didn’t apply it to full screen, i think i missed something

8

I got you past the last test but you have to do some alignment fixes after this code change:

image
image2048×1536 314 KB

#welcome-section{
height: 100vh;
padding: 0;
margin:0;
}

And setup the viewport definition in the html settings

9

Top and bottom padding causes your problem. If you don’t want to change them you can only add this line for .intro selector

  box-sizing: border-box;
10

your awesome, thanks heaps :smile:

1 Like
11

thanks for the tip. went with the padding in the end, but learnt a bit more about box-sizing. :slight_smile:

1 Like