Portfolio Project --- FAIL: The height of the welcome section should be equal to the height of the viewport

I can not figure out how to pass this challenge. I know that my “welcome-section” is probably not where it is supposed to be (most likely should cover nav, h1, h2). The problem is if I delete the current “welcome-section” I am unable to push my h1 and h2 below the nav bar. I tried creating a div with an ID to cover h1 and h2 and to push the text down via margin but it will not work. Ultimately I need to know how make my welcome-section equal to the height of the view port while still keeping my margins on h1 and h2.

Remember viewport height? 100vh

Thank you for your reply. I have tried that. I just added it again and it is still a fail. Maybe the margins are messing with it?

Use the analyze HTML to find the HTML errors. You have many unclosed elements. Maybe it wasn’t necessary for me to remove margin and padding but I did those first before I discovered your invalid HTML

Thank you so much for looking through my code. I wasn’t even aware that the analyze html feature existed. I went through and fixed all the issues. I’m a noob. Unfortunately the issue of the viewport still exists.

Hello! If you eliminate the margin and the padding of the welcome-section, you pass the test!

Thank you! I passed the test but is there an alternative way to push the text below the nav bar so it isn’t hidden?

From my experience, you have two alternatives:

  1. You could change the display of your section#welcome-section to a flex, set the flex-direction to a colum, and justify-content to the center,
#welcome-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

or

  1. you could get your h1 and h2 elements inside a container-div and set that div with position absolute, and then center that div:
div.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I think that these are two good options to center your title below your nav.

Thank you so much! great solutions

When I separate developer tools into its own window the nav is very tall on my screen. When I put around 200px of top margin on the welcome heading it clears the nav.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.