Anchor tag is not working, The height of the welcome section should be equal to the height of the viewport

ambali_zade · August 4, 2021, 10:43am

I am working on personal portfolio project. I am facing two issues.

In contact section of html, I am using anchor tag to link social media profile but its not working.
2)I have set the height of #welcome-section as 100vh, still its showing that “The height of the welcome section should be equal to the height of the viewport.” user story incomplete. Please help
Link to my codepen- https://codepen.io/ambali_zade/pen/BaRYjjy?editors=1100

HTML part

<html>
  <head>
    <script src="https://kit.fontawesome.com/77af9ebff2.js" crossorigin="anonymous"></script>
    </head>
   <navbar id="navbar">
     <ul class="nav-list">
       <li class="nav-item">
     <a href="#about" class="nav-link">About </a> 
       </li>
       <li class="nav-item">
     <a href="#projects" class="nav-link">Projects</a>
         </li>
       <li class="nav-item">
     <a href="#contact" class="nav-link">Contact</a>
         </li>
       </ul>
     </navbar>
  <section id="welcome-section">
    <h1 id="about">Hello, I am Ambali </h1>
   <p><I>An Aspiring Web Developer</I></p> 
  </section>
    
  <section id="projects">
    <h1>Projects</h1>
    <div class="container">
    <div class="project-tile">
      <iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/ambali_zade/embed/wvddVvj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ambali_zade/pen/wvddVvj">
  </a> by Ambali Shirish Zade (<a href="https://codepen.io/ambali_zade">@ambali_zade</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
      </div>
   <div class="d2">
     <iframe height="300" style="width: 100%;" scrolling="no" title="Survey form" src="https://codepen.io/ambali_zade/embed/jOmLBvJ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ambali_zade/pen/jOmLBvJ">
  Survey form</a> by Ambali Shirish Zade (<a href="https://codepen.io/ambali_zade">@ambali_zade</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
   </div>
   <div class="d3">
     <iframe height="300" style="width: 100%;" scrolling="no" title="Product landing page" src="https://codepen.io/ambali_zade/embed/oNWoxEw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ambali_zade/pen/oNWoxEw">
  Product landing page</a> by Ambali Shirish Zade (<a href="https://codepen.io/ambali_zade">@ambali_zade</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
   </div>
    <div class="d4">
      <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwVxwmm" data-user="ambali_zade" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ambali_zade/pen/RwVxwmm">
  Technical Documentation Page</a> by Ambali Shirish Zade (<a href="https://codepen.io/ambali_zade">@ambali_zade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
    </div>  
    </div> 
 <!-- CONTACT SECTION-->
  <section id="contact"> 
    <h2>Social Media</h2>
<a href="https://www.freecodecamp.org/ambali_zade" target="_blank">click here</a>   
</section>
</html>

CSS

#navbar{
  position: fixed;
  width: 100%;
  height: 100vh;  
}
#welcome-section {
  text-align: center;
  font-size: 30px;
  background: pink;
  padding: 5%;
  height: 100vh;
}
.nav-link {
  text-decoration: none;
  }
.nav-list {
  background: skyblue;
  margin: 0;
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  font-size: 25px;
  align-items: center; 
  
}
.nav-item{
  list-style: none;
  margin-right: 2rem;

}
.nav-item a {
  color: black;
  
}
.nav-item a:hover {
  color: blue;
}

.project-tile{
  background:LightSkyBlue;
  border: 1px solid red;
  margin-left: 90px;
  width:100%;
 
}
  .d2{
    background:LightSalmon;
   border: 1px solid red;
    margin-left: 130px;
    width:100%;
    
}
  .d3{
    background:PaleTurquoise;
    border: 1px solid red; 
   margin-left: 90px;
  width:100%;
}
  .d4{
    background:LightPink;
    border: 1px solid red; 
    margin-left: 130px;
    width:100%;
}
.container {
    font-size: 50px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 500px 500px;
    grid-template-rows: 300px 300px;
    grid-column-gap: 100px;
    grid-row-gap: 50px;
  }
#projects {
  height: 200px;
  text-align: center;
}
a {
  text-decoration: none;
  color: black;
  font-size: 30px;
}

@media only screen and (max-width: 500px) {
  body {
    background-color: lightblue;
    font-size: 20px;
  }
  
}

Roma · August 4, 2021, 2:01pm

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

When you provide a link to your pen there’s no value add to posting your code.

mdshariq · August 4, 2021, 2:03pm

try removing margin from the body also applying box-sizing:border-box; might fix the problem with welcome section. And your social link should have id with value profile-link in it.

seekinfox · August 4, 2021, 2:13pm

Hello.
I have seen your code.
read the problems i have listed below →
1.
cutting out extra space.

html, body {
margin: 0;  /*will remove the extra margin around your element*/
}

for #navbar you don’t need height: 100vh;

search relative units online and do some experiments.

again same here, you should read absolute and relative units online, do some experiments.

the value above is interfering with your page viewport.
Adding padding 5% will add extra space around your content and will increase the width and height of your element .

Hint : Try using px or rem unit.

Roma · August 4, 2021, 2:43pm

@ambali_zade, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The failing message says

My portfolio should have a link with an id of "profile-link", which opens my GitHub or FCC profile in a new tab.
expected null to not equal null
AssertionError: expected null to not equal null

Do you understand what the test is looking for and why it is failing?

Here is your selector

#welcome-section {
  text-align: center;
  font-size: 30px;
  background: pink;
  padding: 5%;
  height: 100vh;
}

You’ve set the value of the height property correctly but notice that you’ve adding a padding property. This now makes the height more that the viewport height.

On a side note, there are quite a few errors in your code. For instance, navbar is not a valid HTML5 tag. Run your HTML code through the W3C validator.

Also, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

ambali_zade · August 4, 2021, 4:34pm

Thanks, I will keep this in mind.

ambali_zade · August 4, 2021, 4:39pm

Yes, thanks a lot Problem got fixed after applying box-sizing property and also added the id to social media links.

ambali_zade · August 4, 2021, 4:41pm

Ok, I will surely follow what you are saying, thanks a lot

ambali_zade · August 4, 2021, 4:46pm

Ok, I will run HTML code through W3C validator. Thanks a lot

mdshariq · August 4, 2021, 4:55pm

Good Work! But you should know what the box-sizing:border-box; does.
To summarize we apply this property when we don’t want our element’s height or width to change when we add padding to it, that way we don’t have to keep calculating padding and how it may affect element’s size. You can read more about it here box-sizing - CSS: Cascading Style Sheets | MDN

ambali_zade · August 4, 2021, 5:09pm

Thanks for explaining, I will surely read more about it.

system · February 3, 2022, 5:10am

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