My code passed the test yesterday but now it doesn't

HTML-CSS
1

i don’t know what i do wrong, but now i cant get the two last steps to pass in the product landing page (Your Product Landing Page should use at least one media query.
Your Product Landing Page should use CSS Flexbox at least once.) as far as i know its still there and working :frowning:

<style>
  h1{
    
    grid-area: content;
  }


@media only screen and (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

.flex-container {
  display: flex;
  justify-content: center;
}

.nav-link{
  padding: 10px;
  margin: 5px;
  color: black;
}

.center{
  text-align: center;
}

  </style>
  
  <body>
   <header id="header">

<nav id="nav-bar">
  <a class="nav-link" href="#Over-ear">Over-ear</a>
  <a class="nav-link" href="#In-ear">In-ear</a>
  <a class="nav-link" href="#Accesories">Accesories</a>
</nav>

<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Beats_Electronics_logo.svg/1200px-Beats_Electronics_logo.svg.png" alt="all types of game characters combined" width=70px border="0">

<h1 class="center">Beats</h1>
</header> 

<section id="Over-ear">
</section>

<section class="center" id="In-ear"><iframe id="video" width="350" height="200" src="https://www.youtube.com/embed/KZZB-QSsEFg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</section>

<section id="Accesories">
</section>

<form class="flex-container" id="form" action="https://www.freecodecamp.com/email-submit">
  <input id="email" type="email" placeholder="Enter Email Here" name="email">
  <input id="submit" type="submit">
   </form>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>


  </body>
  <link rel="stylesheet" href="styles.css">
2

Not sure about this passing yesterday, but here are a few things.

One, I noticed you have your <link> tag all the way at the bottom. I believe those should typically go in a <head> section… which I don’t see in this code. I believe in the <head> is usually where your style tags go to. Not sure if that will cause any issues with the test.

Regarding the media query I think I’ve heard on other forums that the media type restriction can mess with the test (the only screen specification).

Rather sparce code there… didn’t bother typing it into a browser, but seems to be a pretty sparce page for a project.

3

OK, played around with it a bit more, and thought it was weird that you would link to a css file, but also have <style> tags in your HTML… I moved all your CSS to the separate CSS file on the page, created a head section and moved the link to there, and that helped to pass the test. Not sure if the test require you to use the provided CSS file or what.

1 Like
4

Thank you, it did pass this time, i had my style.css bugged and it didn’t apply the changes in that tab so i put it in the html, but now it works just fine.

5

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