Product Landing Page - tests say I need one media query and one flexbox, but I have them

HTML-CSS
1

Tell us what’s happening:

For the Product Landing Page, I do have at least one media query and I’ve used CSS Flexbox, but when I try to validate against the Tests, these last two items return as failures. My guess is that the tests are looking for specific media queries and css flexboxes.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Versalife</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
<link rel="stylesheet" href="styles.css">
<body>
<header id="header">
  <img id="header-img" src="https://images.gamebanana.com/img/ico/sprays/versalife.png"></img>
  <nav id="nav-bar">
    <a class="nav-link" href="#video">Video</a>
    <a class="nav-link" href="#entryform-section">Entry Form</a>
    <a class="nav-link" href="#products-section">Products</a>
  </nav>
</header>
<section class="video-section">
  <iframe id="video" src="https://www.youtube.com/watch?v=14bZaTYdA44"></iframe>
</section>
<section class="entryform-section" id="entryform-section">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <fieldset>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" placeholder="hello@email.com" required /></label>
        <input id="submit" type="submit" />
    </fieldset>
<section class="products-section" id="products-section">
<div class="flex-container" id="products">
  <div class="product" id="arms">
            <div class="level">Robot Arms</div>
            <h2>$1 Million</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="legs"><div class="level">Robot Legs</div>
            <h2>$1 Million</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>
</section>
</body>


/* file: styles.css */
header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 19px;
  padding: 25px 0px;
}

body{
  padding-top: 300px;
}

#flex-container{
  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;
}

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

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

You have an element outside of the head and the body. There’s not supposed to be anything out of that area. Typically stylesheet information is stored is in the head, but is allowed in the body.

More info on this here

Happy learning. :slight_smile:

3

Welcome to the community @mackenziewhtn !

The link has been entered twice. Once within the head and once between the head and the body.
Remove the one between the head and the body and you should pass.

Please, as this will help you move on, remember to check the Solution by a2937 for the valuable help provided in their post?

4

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