The height of my welcome-section does not equal the height of my viewport

HTML-CSS
1

Hello! I am trying to do the personal portfolio page and the height of my welcome-section won’t equal the height of my viewport. Could anyone please help me?(: Here is the link to my CodePen: https://codepen.io/djobama/pen/ZEKOXaz thank you for any help

2

This can often be solved with the CSS box-sizing property.

1 Like
3

By using the browser dev-tools I was able to see that, even though your CSS is fine, the problem was just that you forgot to close off the <section id="welcome-section> tag in your HTML. Currently it IS being displayed as 100vh, just the rest of the page is being included in it!

Changing

  <div id="main-content">
    <section id="welcome-section">
      <h1 id="title">First Name Last Name</h1>
      <p id="infoabout">I am doing HTML and CSS.</p>
    <div id="project-title-container">

to

  <div id="main-content">
    <section id="welcome-section">
      <h1 id="title">First Name Last Name</h1>
      <p id="infoabout">I am doing HTML and CSS.</p>
    </section> // <-- you forgot this!
    <div id="project-title-container">

seems to work!

1 Like
4

Thank you! This helped

5

Thank you! This also helped!

6

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