Build a Product Landing Page Problem

Build a Product Landing Page Problem
0.0 0

#1

Tell us what’s happening:

I can’t fix these two errors:

When I Click A .Nav-Link Button In The Nav Element, I Am Taken To The Corresponding Section Of The Landing Page.’

My Product Landing Page Should Have At Least One Media Query.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:


#2

I have the same two tests failing, even though I can see the correct code in my HTML. I submitted a bug report, not sure what else to do…

this is mine:


#3

All you can do is wait for someone to help you. Should take no longer than a couple of days.


#4

Its because your first href link which is “domains-we-build-apps-for” is not an #id you have on you page.

The id you have is “Domains we build apps for”

Also on the id you have a # in front of the name which needed to be removed.

Here is the correct code and should work.

           <li><a class="nav-link" href="#domains-we-build-web-apps-for">Domains we build web apps for</a></li>
           <li><a class="nav-link" href="#testimonial">Testimonial</a></li>
           <li><a class="nav-link" href="#services">Services</a></li>
         </ul>
  </nav>
       
</header>
  
<div class="container">

</div>

<section id="hero">
  <h2>Building custom web applications to suite your needs </h2>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input name="email" id="email" type="email" placeholder="Enter your email address" required/>
    <input id="submit" type="submit" value="Get Started" class="btn"></input>
  </form>
</section>

<div class="container">
<section id="domains-we-build-web-apps-for">

#5

The issue with yours was you had two class elements, they had to be combined into only one.

Here is the correct code

  <nav class="my-2 my-md-0 mr-md-3" id="nav-bar">
    <a class="nav-link p-2 text-dark" href="#features-header">Features</a>
    <a class="nav-link p-2 text-dark" href="#pricing-header">Pricing</a>
    <a class="nav-link p-2 text-dark" href="#singup-header">Sign up</a>
  </nav>

#6

Well now I feel dumb. Thanks for finding that!


#8

Thanks for helping me solve one of the issues, but I still need to figure out why it says I need at least one Media Query when I do in fact have one.


#9

Okay, bro, here’s what you need to fix:

  • Your header now covers the content because it has a fixed position.

  • Media query doesn’t work because you didn’t set it properly.

These two are the main bugs I can think of at a glimpse. Good luck!


#10

You have your media querys written wrong. They need to include the id or class in them.

I fixed the last one for you, which made you pass the test, but you still have to fix all of the other ones.

Here is the solution

  ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}   

   @media (max-width: 650px) {
     #ul {
       flex-direction: column;
     }
  }

#11

Thanks for helping me