Tests pass in codepen, but it doesn't work in text editor

HTML-CSS
1

Tell us what’s happening:
I get this message: Your #nav-bar should always be at the top of the viewport, All the tests passed in codepen but it doesn’t in legacy responsive web design

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="https://kit.fontawesome.com/4adf6b44a3.js" 
        integrity="sha384-W5rS1eWXU+FIrFl/ZMRwUjiG9KAm6RE+PeChEVD00HwCrewjQZXkte7dwn1N3t3q" 
        crossorigin="anonymous"></script>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <div id="page-wrapper">
        <header id="header">
            <div class="logo">
                <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
                alt="original trombones logo"
                />
            </div>

            <nav id="nav-bar">
                <ul>
                    <li>
                        <a class="nav-link" href="#features">
                            Features
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="#how-it-works">
                            How It Works
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="#pricing">
                            Pricing
                        </a>
                    </li>
                </ul>
            </nav>
        </header>

        <body>
        <div class="container"></div>

        <section id="hero">
            <h2>
                Handcrafted, home-made masterpieces 
            </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 type="submit" id="submit" value="Get Started" class="btn" 
                />
            </form>
        </section>

        <div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fas fa-3x fa-shield-alt"></i>
                    </div>
                <div class="desc">
                    <h2>
                        Premuim Materials
                    </h2>
                    <p>
                        Our trombones use the shiniest brass which is sourced locally.
                         This will increase the longevity of your purchase.
                    </p>
                </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa-solid fa-3x fa-bolt"></i>
                    </div>
                    <div class="desc">
                        <h2>
                            Fast Shiping 
                        </h2>
                        <p>
                            We make sure you recieve your trombone as soon as we have finished making it. 
                            We also provide free returns if you are not satisfied.
                        </p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fas fa-3x fa-heartbeat"></i>
                    </div>
                    <div class="desc">
                        <h2>
                            Quality Assurance
                        </h2>
                        <p>
                            For every purchase you make, we will ensure there are no damages or
                            faults and we will check and test the pitch of your instrument.
                        </p>
                    </div>
                </div>
            </section>

            <section id="how-it-works">
                <iframe id="video" width="625" height="315" src="https://www.youtube.com/embed/5oa0fYkmVZQ" title="YouTube video player" frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowfullscreen></iframe>
            </section>
            
            <section id="pricing">
                <div class="product" id="tenor">
                    <div class="level"> 
                        Tenor Trombone
                    </div>
                    <h2 class="six"> 
                        $600
                    </h2>
                    <ol>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum dolor.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                    </ol>
                    <button class="btn">
                        Select 
                    </button>
                </div>
                <div class="product" id="bass">
                    <div class="level2"> 
                        Bass Trombone
                    </div>
                    <h2>
                        $900
                    </h2>
                    <ol>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum dolor.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                    </ol>
                    <button class="btn">
                        Select 
                    </button>
                </div>
                <div class="product" id="valve">
                    <div class="level3"> 
                        Valve Trombone
                    </div>
                    <h2>
                        $1200
                    </h2>
                    <ol>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum dolor.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                        <li>
                            Lorem ipsum.
                        </li>
                    </ol>
                    <button class="btn">
                        Select 
                    </button>
                </div>
            </section>
            <footer>
                <ul>
                    <li>
                        <a href="#">
                            Privacy
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Terms 
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Contact
                        </a>
                    </li>
                </ul>
                <span>
                    © 2022, Original Trombones
                </span>
            </footer>
        </div>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: white;
    font-family: 'Poppins', sans-serif;
}

#page-wrapper {
    position: relative;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.btn {
    padding: 0 20px;
    height: 40px;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    border: 3px solid black;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.grid {
    display: flex;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    min-height: 75px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1em;
}

@media (max-width: 600px) {
    header {
        flex-wrap: wrap;
    }
}

.logo {
    width: 50vw;
}

@media (max-width: 650px) {
    .logo {
        margin-top: 15px;
        width: 100%;
        position: relative;
    }
}

.logo > img {
    width: 100%;
    height: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}

@media (max-width: 650px) {
    .logo > img {
        margin: 0 auto;
    }
}

nav {
    font-weight: 400;
}

@media (max-width: 650px) {
    nav {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 50px;
    }
}

nav li {
    padding-bottom: 5px;
}

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

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

#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    margin-top: 100px;
}

#hero > h2 {
    margin-bottom: 20px;
    word-wrap: break-word;
}

#hero input[type= 'email'] {
    max-width: 275px;
    width: 100%;
    padding: 5px;
    height: 2.3rem;
    line-height: 1.4;
    font-family: inherit;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    

}


#hero input[type= 'submit']{
    max-width: 160px;
    width: 100%;
    height: 43px;
    margin: 15px 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 7px;
    color: white;
    background-color: rgba(9, 9, 36, 0.9);
    font-weight: 700;
    
    
}

#hero input[type='submit']:hover {
    border-radius: 5px;
    max-width: 170px;
    height: 45px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: border-radius 1s ;
  }

@media (max-width: 650px) {
    #hero > h2 {
        margin-top: 100px;
    }
}

@media (max-width: 650px) {
    #hero {
        margin-top: 120px;
    }
}

#features {
    margin-top: 30px;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 20vw;
    color: rgba(6, 6, 24, 0.9);
}

#features .icon > i {
    border: 15px solid rgba(9, 9, 36, 0.8);
    border-radius: 50% ;
}

@media (max-width: 550px) {
    #features .icon {
        display: none;
    }
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 125px;
    width: 80vw;
    padding: 5px;
}

@media (max-width: 550px) {
    #features .desc {
        width: 100%;
        text-align: center;
        padding: 0;
        height: 150px;
    }
}

@media (max-width: 650px) {
    #features {
        margin-top: 20px;
    }
}

#how-it-works {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

#how-it-works > iframe{
    max-width: 580px;
    width: 100%;
    border: 1px solid rgba(6, 6, 24, 0);
    border-radius: 7px;
    
}

#pricing {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% / 3);
    margin: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 6px;
}

.product > .level {
    background-color: rgba(207, 16, 16, 0.9);
    border: 0;
    border-radius: 5px 5px 0 0;
    color: black;
    padding: 10px 0;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
}



.product > .level2 {
    background-color: rgb(5, 189, 143, 0.9);
    border: 0;
    border-radius: 5px 5px 0 0;
    color: black;
    padding: 10px 0;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
}

.product > .level3 {
    background-color: rgb(0, 0, 255, 0.6);
    border: 0;
    border-radius: 5px 5px 0 0;
    color: black;
    padding: 10px 0;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
}



.product > h2 {
    margin-top: 15px;
}



.product > ol {
    margin: 15px 0;
}

.product > ol > li {
    padding: 5px 0;
}

.product > button {
    max-width: 120px;
    border: 0;
    border-radius: 5px;
    margin: 15px 0;
    height: 40px;
    width: 100%;
    background-color: rgba(6, 6, 24, 0.9);
    font-weight: 700;
    color: white;
}

.product > button:hover {
    border-radius: 7px;
    max-width: 130px;
    height: 42px;
    transition: border-radius 1s;
}

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

    .product {
        max-width: 300px;
        width: 100%;   
        margin: 0 auto;
        margin-bottom: 10px;
     }
}

footer {
    margin-top: 30px;
    background-color: rgba(13, 13, 63, 0.3) ;
    padding: 10px;
}

footer > ul {
    display: flex;
    justify-content: flex-end;
}

footer > ul > li {
    padding: 0 10px;
}

footer > span {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #444;
}

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

2

Your css is missing positioning properties that force the nav to always be at the top of the page.

3

The nav is already at the top of the page
I set the header to “position: fixed” already

4

This is the problem. The tests are expecting the nav element to have position: fixed, not the header element.

5

I agree this is probably the issue. You have header and nav as tag elements in your css. That makes them separate elements. The nav might be visually in the header but it isn’t actually inside the header according to the code with the way this curriculum challenge has and requires us to create this page.

When we use CSS to design and control a website everything we give a css element to on the page is it’s own entity on the page. They’re floating objects in the viewport of the browser window, they’re not locked in to the position we place them in unless we give them position property values.

Your nav css needs positioning properties too. The test requires it to pass.

6

I made the correction, and i passed the test, Thanks :grin:

1 Like
7

my brother please can we private chat in the inbox so that I can understand how you were able to pass yours because mine is still not working.

8

why don’t you open your own topic with your own code so you can also get help?

9

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