Personal Portfolio Page - The height of #welcome-section is not equal to the height of the viewport

Hello,

I am having trouble getting my code to pass this one last test. I have tried to set my height to 100vh in the #welcome-section element, but it still does not pass. I would love any suggestions/feedback.

https://codepen.io/peasallg/full/mdwNGwQ

1 Like

Hello! call me 2T!

I just reviewed your codepen it took me JUST 2 mins to find the problems!! : )

After looking at your CSS file with #main-section,

1: It seemed like you wanted to center the h1 tag with padding in welcome section. Yes you can do it, its one way of centering things but if you ask me I would use things like flex and grid for it : ). Look at my code for a reference.

2: I assume here you have set height of welcome-section to 92vh instead of 100vh intentionally . YOU tried to simply change it to 100vh but the test still failed. Here the reason is possibly the usage of negative margin.

Your code in CSS file:

#welcome-section {
    position: static;
    height: 92vh;
    width: auto;
    background-color: #131313;
    color: white;
    grid-area: about;
    font-size: 2em;
    margin-bottom: -7em;
    padding-top: 5em;
  }
  
  h1 {
    font-family: "helveticaneue-light", "helvetica neue light", "sans-serif";
    font-weight: 20;
    margin-left: 2em;
  }

My Solution (There are may other ways to solve this!):

Here I removed the negative margin and since I also removed the padding and instead of padding I used flex to center the h1 tag.

Then set h1 tag to flex and centered it with align-items and justify-content (you can do it on your way).

Now examine this solution don’t just skip it using my fix!

My Solution snippet for CSS file (This will pass the freecodecamp suit!):

#welcome-section {
    display: flex;
    position: static;
    height: 100vh;
    width: auto;
    background-color: #131313;
    color: white;
    grid-area: about;
    font-size: 2em;
    }
  
  h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "helveticaneue-light", "helvetica neue light", "sans-serif";
    font-weight: 20;
    margin-left: 2em;
  }

Also if you are curious how I did this project here is my submission :slight_smile:

2 Likes

try adding a display: block or flexin there somewhere.
display is your friend.
hope this helps.
and yes. grids are good too. box-grids

2 Likes

This solution worked, thank you for your time and effort in helping with this.

So the main take-away here I feel is, the negative margin in my #welcome element was preventing me from passing the test. The negative margin was necessary because I was using padding in my h1. Since we removed the padding and instead used align-items, to center this, it resolved the need to use padding. That in turn allowed me to remove the negative margin. And viola, the test passes!

1 Like

Hello,

Thank you for the tip, I have not used display: block/flex very much in my projects. I probably need to change that, because you are right, they are very useful.

Thank you again!

2 Likes