Product landing page project

HTML-CSS
1

When I view my project from my mobile device I am seeing potential issues . I passed my test but because the nav bar is set to top it does not show my top section on small screens. Is there anything I can do differently in the future?

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" context="width=device-width, initial-scale-1.0">
  <link rel="stylesheet" href="styles.css">
  <head>
    <title id="product-landing">Sword Product Landing Page</title>
  </head>
  <body>
   <main>
    <header id="header">
     <img id="header-img" src="https://i.imgur.com/zbJgppd_d.jpg?maxwidth=520&shape=thumb&fidelity=high" alt="company logo">
      <nav id="nav-bar">  
        <a class="nav-link" href="#about_us">about us</a>
        <a class="nav-link" href="#craftsmanship">craftsmanship</a>
        <a class="nav-link" href="#products">products</a>
      </nav>
    </header>
   <div class="main">
    <h2 id="about_us">About us</h2>
    <p id="about_us">We make premium forged swords. They come in three expertly crafted styles. Special orders available upon request.</p>
    <form id="form" id="form-email" action="https://www.freecodecamp.com/email-submit">
    <p id="text"> Contact us today for special orders or questions.</p>
     <input id="email" type="email" id="email" placeholder="Enter email address" name="email"></input>
      <input name="submit" type="submit" id="submit"></input>
     </form>
     <div class="video"><h2 id="craftsmanship">Craftsmanship</h2>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/P5d9omYAk40" id="video"></iframe>
      <p> <caption >video is for example of forging process only. Our patented process is highly secret.</caption></p>
      </div>
      <section class="product-title">
        <div id="pt1"><h2 id="products">Products</h2></div>
      </section>
      <section class="product">
        <div class="dagger">
      <h3 id="dagger" name="dagger">Dagger</h3>
      <ul class="product-1">
        <p id="price">$100</p>
        <li>Designed for close combat</li>
        <li>Double edge blad</li>
        <li>12" long</li>
        </ul>
        </div>
      </section>
      <section class="product">
      <div class="one-hand" name="one-hand">
      <h3 id="one-hand">Hand and a half sword</h3>
        <ul class="product-2"> 
        <p id="price">$200</p>
         <li>European design</li>
         <li>10" hilt</li>
         <li>32" Double sided blade</li>
         </div>
        </section>
      <section class="product">
      <div class="two-hand" name="two-hand">
      <h3 id="two-hand">Two hand sword</h3>
      <ul class="product-3">
        <p id="price">$350</p>
          <li>Our largest sword</li>
          <li>14" Hilt</li>
          <li>40" Double sided blade</li>
      </ul>
      </div>
      </div>
      <section>
    </main>
  </body>
  <footer>Created by IntelligentNarwhal, with training provided by <a href="https://freecodecamp.org">freeCodecamp</a></footer>
</html>

body {
width: auto%;
height: 100%;
background-color: #f5f5f5;
font-size: 16px;
font-family: Arial, Tahoma;
}

header {
position: fixed;
width: 100%;
top: 0;
left: 0;
diplay: flex;
padding: 1em;
z-index: 999;
background-color: grey;
}

#nav-bar {
float: right;
padding: 50px;
font-size: 20px;
}

.main {
margin-top: 100px;
padding-top: 100px;
}

h2 {
text-align: justify;
}

.product {
display: inline-flex;
justify-context: space-evenly;
border: solid black;
}

#price {
background-color: grey;
}

footer {
text-align: center;
font-size: 12;
}

@media (max-width: 100) {
background-color: white;
}

2

Change the properties you don’t like how they look on the smaller screen by adding them in the media query (btw, your media query is not defined properly). Try the following and play a little bit with these properties:

@media (max-width: 768px){ {
background-color: white;
}
  #nav-bar {
float: right;
padding: 15px;
font-size: 15px;
  margin-right: 50px;
}
}
3

I will try that. Thanks!

1 Like
4

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