I am having trouble with the HTML PersonalPortfolio Page

I have built this page twice now and i cant get to pass the ‘make welcome-section 100% of viewport’

i am pretty sure this time i did but it is not working. I have passed everything else but tis is holding me up.

I am just learning so its hard for me to know what i am doing wrong.

CODE:

#welcome-section {
background-color: black;
padding: 20px;
text-align: center;
color: white;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

We really need to see your entire project to be able to help. I’m guessing there is something else that is keeping your welcome section from truly stretching to 100% of the view port height. If you have your project in codepen (or something similar) then please give us a link to it.

i apologoze but can you explain how to show my project?

i am very new to this. I sincerely appreciate your help

does this work?

Perfect!

By default, padding adds to the total height of an element. So if you set the height to 100vh and also have 20px of top and bottom padding then the height of the element is 100vh + 40px.

There are a couple of ways to deal with this. You could use calc to deduct the extra padding from the height. But probably the easier way is to change the way the browser calculates height for an element. See the CSS box-sizing property.

bbsmooth

thank you so much.

I have been in construction for 20 years and 2 years ago started learning more computer things. in 2019 was the first time i opened Excel in my life. Recently i decided to dive into coding a little bit but, as you can see, i am struggling greatly.

I hope you understand how much any of your help is to me.

Rob

Everybody has to start somewhere :slight_smile: There is a lot to learn and it takes time. I’ve been doing front end development for about 25 years now and I still learn new things all the time.

That CSS box-sizing property is one you want to get to know. You’ll probably want to do the following at the very beginning of your CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

This will make height/width calculations for all elements on your page much more logical. Then you won’t have to worry about added padding and such making elements bigger than you think they should be :slight_smile:

There is a concept of a “CSS Reset” which helps fix some of the quirks and undesirable default behaviors that browser’s use for CSS. Josh Comeau has a good one that I find myself using quite a bit and he explains each rule nicely so you understand why he does something. You might not use this exact one but I would recommend you use some sort of CSS reset to help make your CSS coding experience a little more pleasant.

1 Like

That is super super helpful.

Thanks again. If your ever in south east PA i owe you a beer