Responsive Web Design Projects - Build a Product Landing Page

HTML-CSS
1

Hey guys I have an issue with:

Failed:Your Product Landing Page should use at least one media query.

I’ve tried everything even reddit

  **Your code so far**

/* file: index.html */
<header id="header">
<h1> Nike Tiempo Legend IX</h1>
<img id="header-img" src="https://www.worldsoccer2022.com/media/catalog/product/cache/1780ce500a48f1b0e6e4473982484539/n/i/nike_tiempo_legend_9_elite_fg_black_gold_6.jpeg"alt="Nike Tiempo Legend 9" width= "350px";>

<nav id="nav-bar">
  <ul>
  <li><a class="nav-link" href="#footer" id="shop">Shop</a></li>
  <li><a class="nav-link" href="#footer" id="about">About</a></li>
  <li><a class="nav-link" href="#footer" id="variants" >More Variants</a></li>
  </ul>
</nav>



</header>

<body>
<section id="shop"></section>
<section id="about"></section>
<section id="variants"></section>

<section id="about">
<div id="variants"align="left">


<section id="media">
<iframe
<video id="video"
width="430"
height="240"
align="center"
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0""
frameborder="0"
allowfullscreen>
></iframe>
  </section>


<h2 id="text">If you want to increse your agility and speed these are the boots for you. </h2>
</body> 

<footer>
<form id="footer"action="https://www.freecodecamp.com/email-submit">
</form>
<form id="form" action="https://www.freecodecamp.com/email-submit">
        
        <input id="email"
          type="email"
          name="email"
          placeholder="Your email:"
          class="email"
          required>
        </input>
        <br>
        <br>
        <input id="submit"
        type="submit"
        name="submit"
        placeholder="submit"
        value="Submit"
        class="submit"
        </input>
        
</form>
</footer>
<link rel="stylesheet" href="styles.css">        


/* file: styles.css */
header{
position: fixed;
top:0px;
width:50%;
height:115px;
padding:40px 0px;
display:flex;
align-items:center;
}
#text{
  font: calibri;
}

Media {max-width: 500px} 
body{
 flex-wrap: wrap;
}


  **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

2

this is how to write a media query:

body {
  background-color: tan;
  color: black;
}

/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}

just add it into your challenge and change it if need.

3

Thanks so much bro!
It helped a lot.

1 Like
4

your welcome, always like to help

5

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