Welcome section is not having the same height as viewport? Cant figure out what's the problem

HTML-CSS
1 
    <a href="#about">About </a>
    <a href="#projects">Projects</a>
    <a href="#social">Social</a>
  </nav>
  <welcome id="welcome-section">
  <header id="about">
  <h1>Hello! It's Alim🐱‍🏍</h1>
    <h2>Let me show you the cool websites I made. 😃✔</h2>
  </header>
</welcome>
 
  
  <section id="projects">
    <h2 >Projects</h2>
    <a href="https://codepen.io/alimalim77/pen/RwgdjjO" class="project-tile"><img src="https://cdn2.iconfinder.com/data/icons/strongicon-vol-22/24/filetype-24-1024.png" alt="No image" height=60px width=60px ><br>Technical Documentation Page</a>
    <br>
    <a href="https://codepen.io/alimalim77/pen/jOweGoa" class="project-tile"><img src="https://cdn2.iconfinder.com/data/icons/strongicon-vol-22/24/tool-30-1024.png" alt="No image" height=60px width=60px ><br>Clubs Home Page</a>
  </section>

  <section id="social">
    <h2>Social Networking Links</h2>
    <p> Find me on the platforms</p>
    <ul>
      <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.instagram.com/alymxd/" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="https://www.linkedin.com/in/mohammad-alim-90a91835/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
      <li><a id="profile-link" href="https://github.com/alimalim77" target="_blank"><i class="fab fa-github"></i></a></li>
      <li><a href="#" target="_blank"><i class="fab fa-facebook"></i></a></li>
    </ul>
  </section>
  
  <footer>Made with <i class="fas fa-heart"></i> By Alim</footer> ```  

**CSS:**
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

*{
  box-sizing: border-box;
}

#navbar{
  z-index: 2;
  position: fixed;
}

nav{
  background-color: #83C5BE;
  color: white;
  width: 100%;
  
  display: flex;
  justify-content: flex-end; 
  padding: 20px;
  z-index: 1;
  
  
}

nav a{
  margin-left: 20px;
  color: #2E4057;
  text-decoration: none;
  font-weight: bold;
}

.project-tile{
  display: block;
  text-align: center;
  text-decoration: none;
}

body{
  background-color: #FFDDD2;
  font-family: 'Lato',sans-serif;
  margin: 0;
}

header{
  
  background-image: url("https://unsplash.com/photos/XEB8y0nRRP4/download?force=true");
  background-size: cover;
  background-position: center center;
  color: white;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;  
  flex-direction: column; 
  position: relative;
}

#welcome-section{
 height: 60vh;
}

 header::after {
   content: '';
   background-color: black;
   position: absolute;
   top:0; 
   left:0;
   bottom: 0;
   right: 0;
   opacity: 0.6;
   
}

header *{
  position: relative;
  z-index: 1;
  /*margin: auto;*/
}

header h1{
  font-size: 50px;
  
}

header h2{
  font-size: 20px;
  
}




footer{
  background-color: #CFD186;
  color: black;
  padding: 12px;
  text-align: center;
}

footer .fa-heart{
  color: red;
}

@media(min-width: 400px){
  #navbar{
    postion: relative;
  }
}
2

Your CSS is setting the height to 60% of the viewport. You want to set the height to 100% or 100vh.

3

tried changing it to 100 vh. No result

4

can you provide a link to it?

5
6

I like that you created an html tag “welcome”. Remember that when you do that you need to give it a display property of “block” or “inline”. After I did that it worked, but that’s not the way they want it done.

1 Like
7

Thanks alot. Working fine now

8

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