Stuck on last challenge for portfolio project

Stuck on last challenge for portfolio project
0

#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:

#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:


#11

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