Product Landing Page - Build a Product Landing Page - 8w6hc8gqzk1w-bqdYkvDF

CSS Flex box not being displayed. This test is giving me problem. Please check and guide me.

Screenshot 2022-07-13 223621

/* file: index.html */
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img">
    <nav id="nav-bar">
      <ul>
        <li> <a class="nav-link" href="#features"> Features </a> </li>
        <li> <a class="nav-link" href="#howitworks"> How It Works </a> </li>
        <li> <a class="nav-link" href="#pricing">Pricing </a> </li>
        </ul>
      </nav>
      </header>
      <section>
      <p> Handcrafted, home-made masterpieces </p>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input type="email" id="email" name="email" placeholder="Enter your email id" required> <br> <br>
          <input type="submit" id="submit" value="Get Started">
          </form>
          </section>
      <section id="features" class="main-section">
        <div class="grid">
        <div class="icon">
          <img src="https://th.bing.com/th/id/R.231c4ce72985c0ffbfc9a0bac9f600d3?rik=Tw%2fNiCocue%2fY5g&riu=http%3a%2f%2ficons.iconarchive.com%2ficons%2fgoogle%2fnoto-emoji-travel-places%2f1024%2f42697-fire-icon.png&ehk=Cl0yXFDhAKNy6UBt28Aco8fs%2bxr47vFKAdqd4ty1BZs%3d&risl=&pid=ImgRaw&r=0">
          </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">
          <img src="https://cdn4.iconfinder.com/data/icons/success-filloutline/64/transport-shipping_and_delivery-delivery_truck-cargo-shipping-1024.png">
          </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>
        </section>
        <br> <br>
      <section id="howitworks" class="main-section">
        <iframe src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" allowfullscreen id="video"> </iframe>
        </section>
        <section id="pricing" class="main-section">
          </section>
          </body>
</html>
/* file: styles.css */
@media all {
body {
  background-color:lightgreen;
}
header {
position: fixed;
top: 0;
min-height: 75px;
display: flex;
background-color: #eee;
}
nav {
  margin-top:10px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items: center;
  text-align: center;
  padding: 0 50px;
}
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.grid {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}
.icon img{
  width:120px;
  height:130px;
}
.icon {
  width:40%;
}
.description {
  width:60%;
}
}
  **Your browser information:**

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

It looks like you’ve stuffed all of your CSS into one generic media query that doesn’t really query anything. I think the tests want you to write a media query that targets a specific width and then make CSS changes based on that width. Or perhaps it could even be something else than the width. The point is that it should be different than your default CSS.

1 Like

As said, the media query you have doesn’t really make sense.

But I think with the way the test was written you can’t have flexbox only set inside a media query at all. Which I would consider a bug. It might not be super common but it is valid.

Edit: Issue

2 Likes

Thank you. Problem solved.