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

    <a href="#about">About </a>
    <a href="#projects">Projects</a>
    <a href="#social">Social</a>
  <welcome id="welcome-section">
  <header id="about">
  <h1>Hello! It's Alim๐Ÿฑโ€๐Ÿ</h1>
    <h2>Let me show you the cool websites I made. ๐Ÿ˜ƒโœ”</h2>
  <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>
    <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 id="social">
    <h2>Social Networking Links</h2>
    <p> Find me on the platforms</p>
      <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>
  <footer>Made with <i class="fas fa-heart"></i> By Alim</footer> ```  

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

  box-sizing: border-box;

  z-index: 2;
  position: fixed;

  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;

  display: block;
  text-align: center;
  text-decoration: none;

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

  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;

 height: 60vh;

 header::after {
   content: '';
   background-color: black;
   position: absolute;
   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;

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

footer .fa-heart{
  color: red;

@media(min-width: 400px){
    postion: relative;

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

tried changing it to 100 vh. No result

can you provide a link to it?

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

Thanks alot. Working fine now

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