Personal Portfolio: The height of the welcome section should be equal to the height of the viewport

1

I passed all test except ‘The height of the welcome section should be equal to the height of the viewport.’. It has been a few days to try to figure it out, but I cannot find what is wrong with my code. I tried to use both height: 100vh; and min-height: 100vh; on my welcome section.Can you explain why I do get the error and how to fix it? I need your help, please!
link to my project…
https://codepen.io/develop1101/pen/BqreYY

2

You should also include the navbar.
For example 10vh for the navbar and 90vh the welcome section…

I wrapped both the head and the welcome section inside of a div with a class of container and gave it a height:100vh;

<div class="container">
<header>
<nav id="navbar">
  <ul>
    <li><a href="#welcome-section">About</a></li>
    <li><a href="#projects">Work</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
</header>

<main>
<section id="welcome-section" class="welcome-section">
  <h1>Hey, I am Michelle.</h1>
  <p>a web developer</p>
</section>
</div>



.container{
 height:100vh;
;}

One more thing, change the icons to contact you, it looks unprofessional…

1 Like
3

Thank you so much for your suggestion! However, I do get same error. Does both navbar and welcome-section have to be 100vh height or only welcome-section? Also, I am really bad using colors and designs. Is there any suggestion for my icons?

4

@developer1101

I wrapped both the navbar and the welcome section inside of a div because both of them together equal to the height of the viewport and not each one of them.
You could also try give a height of say 5vh to the navbar and 95vh to the welcome section so together they equal to 100vh so to fill the viewport.

Since there is also the space occupied by the navbar If you give the welcome section a height of 100vh it’ll cover also some extra space below (which is basically the height of the navbar). That’s why when you scroll you will see the welcome section.

It’s like you gave the welcome a top-margin…

5 
#navbar {
  height: 15vh;
  background-color: #ffff80;
  position: fixed;
  width: 100%;
  top: 0;
  font-weight: 700;
}

.welcome-section {
  background-color: #b3b300;
  height: 85vh;
  padding-top: 50px;
  margin-top:15vh;
}

Since the navbar is fixed it’ll cover the welcome section just give the welcome section a margin-top with the same height as the navbar…

-Edit Just realized you’re trying to pass the challenge, it has been a long time since I’ve done it, sorry about that.

6

This passes the last test

#navbar {
  height: 10vh;
  background-color: #ffff80;
  position: fixed;
  width: 100%;
  top: 0;
  font-weight: 700;
}
.welcome-section {
  background-color: #b3b300;
  height: 92vh;
  padding-top: 50px;
}
7

I passed the challenge! I understood it now. Thank you so much for your help! :slight_smile: