Portfolio Project: 100vh takes the full screen and doesnt show other elements

Code Feedback
1

Hello All,

So I am currently trying to complete my portfolio project and I noticed that one of the tests requires that I have 100vh for my welcome section. when I do this, the test pasts but I am unable to see the rest of my elements due to the welcome section taking the whole viewport, I know there is a way to have 100vh and still have other elements like the example project shows, I just don’t know what to change in order to do so. any help?

2

please put your code here or link to the code .

3

Sorry for the late reply but here is my HTML and CSS so far. didn’t want to progress to far before solving this error.

<navbar id="navbar">
  <a href= "#projects">projects</a>
<navbar>
<header id ="welcome-section">
  <h1> Hi Im a Dev</h1>
</header>
<main id = "projects">
<div class ="project-tile">
  <p>FPS Platformer</p>
  </div>
  <div class ="project-tile">
  <p>Shopping Cart</p>
    <a href=""> link </a>
  </div>
  <div class ="project-tile">
  <p>Roll a Ball Game</p>
  </div>
  
    <div class ="project-tile">
  <p>Create With Code</p>
  </div>
  
  <div class ="project-tile">
  <p>Sorting Algorithms</p>
  </div>
</main>
<footer>
  <a href="" id="profile-link" target = "_blank" >portfolio link</a>
</footer> 

CSS:

#welcome-section
{
  display:flex;
  height:100vh;
  margin: auto;
  flex-direction:column;
  
  background-color: grey
}

#welcome-section h1
{
 
}

navbar
{
  position:fixed;
}

@media only screen and (max-width:800px)
{
  background-color:brown;
}

main
{
  display:flex;
  gap: 40px;
  
  background-color:green;
}

.project-tile
{
  border:5px solid black;
}
4

  1. navbar is not a standart element. I assume you meant a <nav> element?

  2. You didn’t close the element </navbar>

6

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