Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Hi guys ,

I was stuck with this issue a while back but have come back to it now. It is about where to place the media queries. I have been stuck with this issue for the past hour and have even followed a tutorial on youtube but have not had any luck. If you could please help me thanks . @media (max-width: 500px);

  **Your code so far**

/* file: index.html */

<style>
header{
  position: sticky;
  top: 0;
  width: 100%;
 
}

@media screen and (max-width: 992px) {
body {
  background-color: white;
}
}

</style> 


<link rel="stylesheet" href="styles.css">
<header id="header">
<h1>Welcome to my Life</h1>
<img src="https://miro.medium.com/max/1400/1*VaYVj7NvnTzFnY9v38iKmg.png" alt="What is Life Image" id="header-img" border ="10" height="250px" width="300px";>

<nav id="nav-bar">
  <h1><u>Welcome to my Life</u> &nbsp; &nbsp; &nbsp;
  <a class="nav-link" href="#University Life">University Life</a> &nbsp; &nbsp; &nbsp;
  <a class="nav-link" href="# MLA Job">MLA Job</a> &nbsp; &nbsp; &nbsp;
  <a class="nav-link" href="#Improving my Deen">Improving my Deen</a> &nbsp; &nbsp; &nbsp;
  </h1> 
   </nav> 
</header>

<body> 
<section id="University Life">
<div id="Uni Life Vid" align="right" style ="width:100%; overflow: hidden">
  <iframe
  id="video"
  width ="200"
  height="300"
  align="left"
  src="https://www.youtube.com/watch?v=poymNtxLQfo"allowfullscreen>
  frameboarder="0"></iframe>
 </section>

<section id="MLA job"> </section>

<section id="Improving my Deen"> </section>
</body>

<footer>
<form id="form" action="https://www.freecodecamp.com/email-submit"</input>
<br>
<input id="text"class="text"  name="text" placeholder="Do you have a question?"required></input>

<br>
  <input id="email" class="email" type="email" name="email"placeholder="What email would you like to be responded to?" required</input>

  <br>

  <input
  id="submit" type="submit" class="submit"value="Ask Now"></input>
</form>

 </footer>


/* file: styles.css */


  **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: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

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