Product Landing Page User Story #13

Tell us what’s happening:
My code is failing User Story #13, which is stating that the nav-bar should always be at the top of the viewport. The issue is, my nav-bar IS always at the top of the viewport, but yet it fails every time and I can’t figure it out. The error message states “#header or one of its children should be at the top of the viewport : expected 100 to be close to 0 +/- 15” I even created a fake title and made it invisible to the viewer in order to fix the issue, which it did for a little bit, and then it stopped working again. I know it’s kind of a mess, but any sort of assistance would be greatly appreciated!Preformatted text
Your code so far
HTML:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header id="header">
  <nav id="nav-bar">
    <ul>
      <img src="https://res.cloudinary.com/teepublic/image/private/s--heacdgnd--/c_fit,g_north_west,h_729,w_840/co_ffffff,e_outline:40/co_ffffff,e_outline:inner_fill:1/co_ffffff,e_outline:40/co_ffffff,e_outline:inner_fill:1/co_bbbbbb,e_outline:3:1000/c_mpad,g_center,h_1260,w_1260/b_rgb:eeeeee/c_limit,f_jpg,h_630,q_90,w_630/v1549752765/production/designs/4172122_0.jpg" id="header-img" alt="Amiibo Logo">
      <li class="nav-link" href="#demonstration"><a class="nav-link" href="#demonstration">Demonstration</a></li>
      <li class="nav-link" href="#pricing"><a class="nav-link" href="#pricing">Pricing</a></li>
      <li class="nav-link" href="#other-amiibos"><a class="nav-link" href="#other-amiibos">Other Amiibos</a></li>
      <h1 id="f-title">Fake Title</h1>
    </ul>
  </nav>
</header>
  <main id="main">
  <div id="title">
    <h2 id="page-title">Richter Amiibo</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <label for="email" id="email-label">Sign up to receive updates about future products and exclusive offers!</label>
    <div id="input-div">
      <input type="email" name="email" id="email" placeholder="Please Enter Your Email Address">
     <input type="submit" id="submit" value="Sign Up" class="btn-hvr">
    </div>
  </form>
  </div>
  <div id="demonstration">
    <h2 id="demo-title">Demonstration</h2>
    <iframe width="700" height="400" id="video" src="https://www.youtube.com/embed/CiOkxdqN1G8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div id="pricing">
    <h2 id="pricing-title">Pricing</h2>
    <div id="price-group">
    <img id="pricing-img" alt="Picture of Richter Amiibo" src="https://assets.nintendo.com/image/upload/f_auto,q_auto,w_428/ncom/en_US/amiibo/richter-amiibo-super-smash-bros-series/figure?v=2021052421">
    <h3 id="price">$15.99<h3>
    <input type="button" id="buy-button" value="Buy Now">
    </div>
  </div>
  <div id="other-amiibos">
    <h2 id="other-title">Other Amiibos</h2>
    <img id="other-img" alt="Picture of other Amiibo options" src="https://www.nintendo.com/etc.clientlibs/noa/clientlibs/clientlib-ncom/resources/images/page/amiibo/home/amiibo-hero-mobile.jpg">
    <input type="button" id="other-button" value="Take Me There">
  </div>
</main>

CSS:

* {
  background-color: #D4F7EC;
  font-family: Helvetica, Verdana, sans-serif;
}
@media (max-width: 600px;){
  *{
    font-size: 15px;
  }
}
#header-img{
  border-radius: 20%;
  width: 40px;
  height: auto;
  float: right;
  display: inline-block;
  margin-top: 5px;
  margin-right: 5px;
}
li{
  float: left;
  border-right: 1px solid #090934;
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1258DC;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
li, a{
  display: block;
  color: #090934;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  background-color: #1258DC;
  font-size: 18px;
}
#page-title{
  margin-top: 100px;
  text-align: center;
  color: #090934;
  font-size: 48px;
  line-height: 0.5;
}
#form{
  text-align: center;
  color: #090934;
}
#email{
  width: 15%;
  border-radius: 8px;
  margin-top: 15px;
}
#submit{
  width: 5%;
  border-radius: 8px;
  color: #D4F7EC;
  background-color: #090934;
}
#demonstration{
  background-image: linear-gradient(#090934, #D4F7EC);
  width: 75%;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  color: #D4F7EC;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  padding-bottom: 15px;
}
#f-title{
  display: flex;
  margin-top: 0px;
  text-align: center;
  color: #1258DC;
  font-size: 32px;
  line-height: 0.5;
  background-color: #1258DC; 
}
#demo-title{
  background-color: #090934;
  color: #D4F7EC;
}
#pricing{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #090934;
  line-height: 0.25;
}
#price{
  font-size: 28px;
  margin-top: 5px;
}
#pricing-img{
  margin-bottom: 5px;
  margin-top: 5px;
}
.nav-link:hover{
  background-color: #2E2FE3;
}
a{
  background-color: inherit !important;
}
#pricing-title{
  margin-bottom: 10px; 
}
#buy-button{
  background-color: #090934;
  color: #D4F7EC;
  border-radius: 8px;
  width: 30%;
  height: 30px;
  margin-bottom: 10px;
}
#other-amiibos{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #090934;
  background-color: white;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
#other-button{
  background-color: #090934;
  color: white;
  border-radius: 8px;
  width: 20%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#other-title{
  background-color: white;
}
#buy-button:hover , #submit:hover{
  background-color: #171782;
  color: #D4F7EC;
}
#other-button:hover{
  background-color: #171782;
  color: white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

Can you share your pen link that way it’s easier to identify the issue.

but as a side note you can try.

#nav-bar{
     position: fixed;
     top: 0;
}

This should fix your problem.

https://codepen.io/marcusvaughan27/pen/yLMVLoR

Here’s the link to my pen

Thanks, that did actually fix my issue.

Awesome, also I can see your page is not responsive, you might want to take some time to lookup media queries and making images responsive in CSS.

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