Personal Portfolio page failing for User Story 10 and dont know why

HTML-CSS
1

Hi,

I’m working on the last project for the responsive web design, personal portfolio page. I will say upfront I am doing bare minimum to get my feet a little wet here, and I’m failing for this user story,

User Story #10: The height of the welcome section should be equal to the height of the viewport.

Codepen: https://codepen.io/abdullah001/pen/XWNMNQP

Wondering if anyone had advice on what section to review from the modules and/or what to do. Thanks! Here is the code


  <!DOCTYPE html>
  <style>
    @media (max-height: 800px) {
      p {
        font-size: 10px;
      }
    }
    #navbar {
      position: fixed;
      top: 0px;
      left: 30px;
    }
    h1 {
      padding: 10px;
    }
    #welcome-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 20px;
}
  </style>
  <html lang="en">
    <head>
      <title>Personal Portfolio Webpage</title>
      <meta charset="utf-8" />
    </head>
    <body>
      <nav id="navbar">
        <a href="#projects">Projects</a>  |  
        <a href="https://www.freecodecamp.org/abdullah_31" id="profile-link" target="_blank">Visit My FreeCodeCamp Profile</a>
      </nav>
      <main>
        <section id="welcome-section">
          <h1>Welcome to My Portfolio Page</h1>
        </section>
        <section id="projects">
          <header>Technical Documentation Project</header>
          <div class="project-tile" >
            <a href="technical_documentation_page.html">Check out the doc page</a>
          </div>
        </section>
      </main>
    </body>
  </html>
2

It would be best if you could include a link to your actual project with the FCC tests enabled so we can run the tests for ourselves in order to help you troubleshoot.

1 Like
3

https://codepen.io/abdullah001/pen/XWNMNQP

I hope the above works.

4

Here’s your error (the actual numbers in the error will depend on how tall your view port is):

“The height of the welcome section should be equal to the height of the viewport. The height of #welcome-section is not equal to the height of the viewport : expected 999 to be close to 959 +/- 0”

It’s telling you that the view port height was 959 but the height of your welcome section is 999. In other words, the welcome section is too tall. I was able to fix this by adding one CSS property to the welcome section. I’ll give you a hint, it has to do with sizing, box sizing to be specific.

1 Like
5

Thanks! I plan to be out and about soon, but plan to check it out further in my notes.

1 Like
6

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