Build a Product Landing Page Problem

HTML-CSS
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>
2 Likes
6

Well now I feel dumb. Thanks for finding that!

1 Like
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

12

i faced similar issue as the OP. thanks for guide

13

i too have the same problem which i cant even know where to start please i need help

14

@rans

Go head and create a new post with your code. Preferably share it with codepen.

15

. The navbar should always be at the top of the viewport

16

do you have a link to codepen?