Product Landing page flexbox and media querry issue

Help. The test script does’t dedects the media querry and flexbox.

HTML:

<head>
    <link rel="stylesheet" href="C:\Users\Administrator\Documents\VS Code files\FCCLandPage\stylesheet.css" type="text/css">
</head>

<!--
    freecodecamp test script 
-->
<div id="fcccheckbox">
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</div>


<div id="PageWrapper">

   

<header id="header">
    
<div id="container"><img id="header-img" src="http://is.am/4m8e" alt="PageLogo"></div>
<nav id="nav-bar">
    <a class="nav-link" href="#History">History</a>
    <a class="nav-link" href="#Types">Types</a>
    <a class="nav-link" href="#Price">Price</a>
</nav></header>

<section id="History"><h1 >History</h1>
<p id="Text">guitar, plucked stringed musical instrument that probably originated in Spain early in the 16th century, deriving from the guitarra latina, a late-medieval instrument with a waisted body and four strings. The early guitar was narrower and deeper than the modern guitar, with a less pronounced waist. It was closely related to the vihuela, the guitar-shaped instrument played in Spain in place of the lute.</p>
</section>

<div class="container"> 
<div class="child"> <img class="child" src="http://is.am/4n68" alt="Fender" ></div>
<div class="child"> <img class="child" src="http://is.am/4n69" alt="Gibson"></div>
<div class="child"> <img class="child" src="http://is.am/4n6a" alt="Slash"> </div>
</div>

<div id="gap"></div>
<iframe id="video" width="771" height="578" src="https://www.youtube.com/embed/b3oi174RAiI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section id="Types"><h1>Types</h1>
    <p id="Text">Classical Guitars


        The classical guitar, also known as the Spanish guitar, was originally made to play classical or flamenco music but they are now used to play whichever type of music the player desires.
        
        Classical guitars tend to feature nylon strings which are easier on fingers and produce a mellower sound than steel strings. Classical guitars are often available in a variety of sizes (find out what size guitar you need here) making them a great option for young players. The sound they produce, the often cheaper price, and the variety in sizes available has made the classical guitar the most popular for beginners.
        
        Acoustic Guitar 
        
        
        The acoustic guitar is similar to the classical guitar but instead of nylon strings it is typically made with steel strings that produce a much louder sound. There are a number of different types of acoustic guitar that you can play including the dreadnought and twelve string guitars.
        
        Electro-Acoustic Guitar
        
        
        The electro-acoustic guitar is basically the same as an acoustic guitar but with the option to amplify the sound by plugging into amplifiers. Electro-acoustic guitars are also popular for use with recording equipment and sound effect pedals. 
        
        Electric Guitar
        
        
        Electric guitars differ from other types of guitar because they produce a sound by converting the vibration of the strings into electric signals. Meaning that unlike the other guitar types you cannot just pick up an electric guitar and play it. You will need to plug the electric guitar into an amplifier to get a sound.
        
        Bass Guitar
        
        
        The bass guitar is designed to produce a much lower tone than the other guitars. Most modern bass guitars are electric and feature four strings, though some bass guitars do have five or six stings. </p>
    </section>
<section id="Price"><h1>Price</h1><p id="Text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid, consequuntur? Dignissimos totam aliquid dolor magnam. Praesentium culpa iure recusandae similique aliquam repudiandae consequuntur quod, vero, illo deserunt dolor? Doloribus, vero.</p></section>
<form id="form" action=" https://www.freecodecamp.com/email-submit">

    <input type="email" name="email" id="email" placeholder="email" required></input>
<input type="submit" value="submit"  id="submit"></input>

</form>




</div>

CSS:

body{

   

    background-color: rgb(255, 255, 255);

}

#header{

    margin-top: 30px;

}

div{

    width: fit-content;

}

li{

   

    font-size: 133%;

    margin-right: 2cm;

   

}

#gap{

  height: 2cm;

}

.container{

  display: flex;

 

}

@media (max-width: 800px) {

  .container {

    display: flex;

    flex-direction: column;

  }

}

#nav-bar{

    background-color: #333;

  position: fixed; /* Set the navbar to fixed position */

  left: 55;

  top: 10; /* Position the navbar at the top of the page */

  overflow: hidden;

}

.child{

  width: 300px;

  height: 300px;

  background-color: aquamarine;

  margin-left: 30px;

  left: 45%;

}

.child:hover{

  width: 310px;

  height: 310px;

  background-color: blueviolet;

  color: white;

}

#nav-bar a{

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  background-color: rgb(12, 3, 65);

}

#nav-bar a:hover {

    background: rgb(0, 0, 0);

    color: rgb(186, 55, 238);

  }

  #header-img{

      margin-top: 40px;

  }

  #History{

      padding-top: 50px;

  }

  #Types{

    padding-top: 50px;

  }

  #Text{

      font-size: 35px;

  }

  #form{

      background-color: darkviolet;

      color: darkblue;

      width: fit-content;

     

      font-size: 30px;

      justify-content:center;

  }

  #email{

      font-size: 30px;

  }

  #submit{

    font-size: 30px;

      justify-content:center;  

    background-color: orange;

  }

  #submit:hover{

      background-color: rgb(27, 206, 66);

  }

Hello @zokorno thanks for posting. To be honest I’m having trouble following your code in the current way it’s presented. Can you post the link to your project so I can go into Codepen (I’m assuming that’s what you are using for the project?) and look further into the code?

I didn’t use codepen (is this could be reason ?) . I used virsual studio code.
So i’m going to transform it to codepen after that post you the link if issue won’t solve.

1 Like

Hey @zokorno, sounds good. To be clear, I don’t think it’s caused by not using Codepen, however that’s how fCC tests your projects. So if you can post the link once you have it in Codepen, I can view it in an easier manner.

İt’s done, i solved. I just literally copy all the code and paste it to blank codepen page :smiley: and its all solved.
Thanks for your time and attention

1 Like

Ah perfect! Good luck on the rest of the HTML/CSS projects, and feel free to write back on the board if you have any other questions.

@zokorno, the reason the test script isn’t working correctly is because it needs to be placed before the closing body tag when using something like vsc. This is because the HTML code must load first so that the test script can read it.
It doesn’t matter where it’s placed in codepen because codepen sets the boilerplate code for you.

Hope that helps.

1 Like

Both tests rely on the page being served (not just opened in the browser). You can use something like the Five Server extension to serve the page when working locally.

As an aside, you should also use relative paths, e.g. ./stylesheet.css and not absolute paths (they will not work on a server as they do on your local machine).

1 Like