Portfolio Project: problem with viewport height (100vh) and padding

Code Feedback
1

I am currently having a slight issue with one of the criteria that requires you to have #welcome-section height to be equal to the height of the viewport.

I can pass the criteria when I delete my padding (i have paidding: 25% under #welcome-section) on it, but if I have the padding there, I cannot pass the criteria even though I have written in height: 100vh. (to be precise I have min-height: 100vh and height: 100%, but I have tried just putting in height: 100vh as well and it didn’t work either)

can someone please explain to me why this happens? Am I not allowed to have both padding and height: 100vh in one section?

here is my portfolio page:
https://codepen.io/ahnemuiuouzzz/pen/MWjePNX

2

Hi there,

You don’t need both a height and a min-height.

The padding is part of the height, so you have to account for it. Right now, you have padding on all sides of the viewport. I’m guessing you just need padding for the top? Then, just make sure the padding-top and the height add up to 100vh. If you want padding on the bottom, too, then you can put that in, and make sure all the padding and height add up to 100vh.

Hope that’s clear.

1 Like
3

I set mine to 98vh and it worked perfectly for me.

4

Ah, that makes sense.
thank you so much for your help!

1 Like