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:
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:
All you can do is wait for someone to help you. Should take no longer than a couple of days.
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">
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
Well now I feel dumb. Thanks for finding that!
1 Like
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.
Okay, bro, here’s what you need to fix:
These two are the main bugs I can think of at a glimpse. Good luck!
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;
}
}
jgyy
12
i faced similar issue as the OP. thanks for guide
rans
13
i too have the same problem which i cant even know where to start please i need help
@rans
Go head and create a new post with your code. Preferably share it with codepen.
rans
15
. The navbar should always be at the top of the viewport
do you have a link to codepen?