Product Landing Page: Media Query test fails

Hi, so I run my code in VS Code. I usually copy the codepen example into 2 files namely index.html and style.css and place them in the same folder. Then I link my stylesheet to my html page. I also add the cdn link to my script inside the html page.

When I open the index.html in my browser I can usually see the page and run the tests which usually completes 100%. But with the product landing page I get two errors, it can’t seem to find the @media queries and the flexbox instances. What I found out though is that if you run the styling inside the html page the tests pass 100 percent.

Now is there a way I can fix this so that the tests will work from a stylesheet outside the html page? If that makes sense. Thanks

Hello, Lazuli.

Have you tried switching the order of the freeCodeCamp CDN and the link to your CSS file?

Media queries come atlast, under the code you used it on. it’s like a script.

and then 2 closingbrackets }} if you don’t do that, then the mediaquerie takes everything below after the media querie.

Same as with keyframing.

Doesn’t seem to work.

It always works for me. Are you sure you are linking to your stylesheet correctly?

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" async defer></script> 
    
    <link rel="stylesheet" href="style.css">      
</head>
<body>

This is how its now with style.css being my stylesheet.

Try placing the script tag just above your closing html tag:

...
<script>...</script>
</html>

Hope this helps.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">      
    </head>
    <body>
        <div id="page-wrapper">
            <header id="header">
              <div class="logo">
                <img
                  id="header-img"
                  src="https://s3.amazonaws.com/freecodecamp/original_trombones.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>
          
            <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 id="submit" type="submit" value="Get Started" class="btn" />
              </form>
            </section>
          
            <div class="container">
              <section id="features">
                <div class="grid">
                  <div class="icon"><i class="fa fa-3x fa-fire"></i></div>
                  <div class="desc">
                    <h2>Premium 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 fa-3x fa-truck"></i></div>
                  <div class="desc">
                    <h2>Fast Shipping</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="fa fa-3x fa-battery-full" aria-hidden="true"></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"
                  height="315"
                  src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
                  frameborder="0"
                  allowfullscreen
                ></iframe>
              </section>
              <section id="pricing">
                <div class="product" id="tenor">
                  <div class="level">Tenor Trombone</div>
                  <h2>$600</h2>
                  <ol>
                    <li>Lorem ipsum.</li>
                    <li>Lorem ipsum.</li>
                    <li>Lorem ipsum dolor.</li>
                    <li>Lorem ipsum.</li>
                  </ol>
                  <button class="btn">Select</button>
                </div>
                <div class="product" id="bass">
                  <div class="level">Bass Trombone</div>
                  <h2>$900</h2>
                  <ol>
                    <li>Lorem ipsum.</li>
                    <li>Lorem ipsum.</li>
                    <li>Lorem ipsum dolor.</li>
                    <li>Lorem ipsum.</li>
                  </ol>
                  <button class="btn">Select</button>
                </div>
                <div class="product" id="valve">
                  <div class="level">Valve Trombone</div>
                  <h2>$1200</h2>
                  <ol>
                    <li>Plays similar to a Trumpet</li>
                    <li>Great for Jazz Bands</li>
                    <li>Lorem ipsum dolor.</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>Copyright 2016, Original Trombones</span>
              </footer>
            </div>
          </div>
          
    </body>

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" async defer></script>    
</html>

then I have the style.css

/** global element styling **/

@import "https://fonts.googleapis.com/css?family=Lato:400,700";

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

body {
  background-color: #eee;
  font-family: 'Lato', sans-serif;
}

#page-wrapper {
  position: relative;
}

li {
  list-style: none;
}

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

/** global classes styling **/

.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 black solid;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.grid {
  display: flex;
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

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

.logo {
  width: 60vw;
}

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

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  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: 50px;
}

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

#hero input[type="email"] {
  max-width: 275px;
  width: 100%;
  padding: 5px;
}

#hero input[type="submit"] {
  max-width: 150px;
  width: 100%;
  height: 30px;
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
}

#hero input[type="submit"]:hover {
  background-color: orange;
  transition: background-color 1s;
}

@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: darkorange;
}

@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: 0;
  }
}

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

#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
}

#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;
  border: 1px solid #000;
  border-radius: 3px;
}

.product > .level {
  background-color: #ddd;
  color: black;
  padding: 15px 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 {
  border: 0;
  margin: 15px 0;
  background-color: #f1c40f;
  font-weight: 400;
}

.product > button:hover {
  background-color: orange;
  transition: background-color 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: #ddd;
  padding: 20px;
}

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;
}

Just like I got it from codepen, but don’t worry decided just to use style tags and do the last two points like that to pass the test. As you can see I am really new to this but thanks.

I have edited your post for readability. For future posts, please follow this, when formatting code: Forum Code Formatting

Otherwise, I am out of ideas. Even with the code you just pasted, I am able to get the media queries to be recognised by the tester.

1 Like

A post was split to a new topic: Product Landing Page Tests Incomplete