I got 2 Errors at Technical Documentation Page - Build a Technical Documentation Page

I have 2 errors in this code so far:

  • Your #navbar should always be on the left edge of the window.
  • Failed:Your Technical Documentation project should use at least one media query.
    For the first one I tried few things and I know I need to google it just a little bit more to find perfect solution. But the 2nd one is that I deal with last hour. I searched platform and everyone says “You should link css to the html”. But it’s obviously linked since I changed a lot of things through CSS and it’s visible.
    Thanks!

I have 2 errors in this code so far:

  • Your #navbar should always be on the left edge of the window.
  • Failed:Your Technical Documentation project should use at least one media query.
    For the first one I tried few things and I know I need to google it just a little bit more to find perfect solution. But the 2nd one is that I deal with last hour. I searched platform and everyone says “You should link css to the html”. But it’s obviously linked since I changed a lot of things through CSS and it’s visible.
    Thanks!

Your code so far

<html lang="en";
<head>
  <title>Cars</title>
  <html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
<main id="main-doc">
  <section class="main-section" id="Audi_A8">
    <header>Audi A8</header>
    <article>
      <p>The <code>Audi A8</code> is a full-size luxury sedan manufactured and marketed by the German automaker Audi since 1994. Succeeding the Audi V8, and now in its fourth generation, the A8 has been offered with both front- or permanent all-wheel drive—and in short- and long-wheelbase variants.</p>
      <p>In 1982, Ferdinand Piëch signed an agreement with Aluminum Company of America. The objective was to design and develop a car.</p>
    </article>
    <ul>
      <li>Audi a3</li>
      <li>Audi a4</li>
      <li>Audi a5</li>
    </ul>
  </section>
  <section class="main-section" id="Mercedes-Benz_G-Class">
    <header>Mercedes-Benz G-Class</header>
    <article>
      <p><code>The Mercedes-Benz G-Class</code>, colloquially known as the G-Wagon[3] (as an abbreviation of Geländewagen) is a four-wheel. Originally developed as a military off-roader.</p>
      <p>The G-Wagen is characterised by its boxy styling and body-on-frame construction.
</p>
    </article>
    <ul>
      <li>SLK</li>
      <li>ML</li>
      <li>GLA</li>
    </ul>
  </section>
  <section class="main-section"  id="Lada_Niva">
    <header>Lada Niva</header>
    <article>
      <p>This article is about the vehicle currently known as the <code>Lada Niva Legend</code>. For the Lada Niva Travel, see Lada Niva Travel.</p>
      <p>The Lada Niva Legend,[3] formerly called the Lada Niva, VAZ-2121, VAZ-2131, and Lada 4×4.</p>
    </article>
    <ul>
      <li>Lada 1</li>
      <li>Lada 2</li>
      <li>Lada 3</li>
    </ul>
  </section>
  <section class="main-section"  id="Hyundai_Genesis_Coupe">
    <header>Hyundai Genesis Coupe</header>
    <article>
      <p><code>The Hyundai Genesis Coupe</code> is a rear-wheel drive sports coupe from Hyundai Motor Company, first released on October 13, 2008, for the Korean market.</p>
      <p>The Genesis Coupe arrived in United States dealerships on February 26, 2009, as a 2010 model.</p>
    </article>
    <ul>
      <li>Htundai 1</li>
      <li>Hyundaji 2</li>
      <li>Hyonudayi 3</li>
    </ul>
  </section>
  <section class="main-section"  id="Honda_Civic">
    <header>Honda Civic</header>
    <article>
      <p><code>The Honda Civic</code> (Japanese: ホンダ・シビック, Hepburn: Honda Shibikku) (/s̻ivək/) is a series of automobiles manufactured by Honda since 1972.</p>
      <p>The first-generation Civic was introduced in July 1972 as a two-door fastback sedan,[2] followed by a three-door hatchback that September. With a 1,169 cc transverse engine and front-wheel drive like the British Mini, the car provided good interior space despite overall small dimensions.[3] Initially gaining a reputation for being fuel-efficient.</p>
    </article>
    <ul>
      <li>Honda Sljivik 1</li>
      <li>Honda Sljivik 2</li>
      <li>Honda Sljivik 3</li>
    </ul>
  </section>
</main>
<nav class="navbar" id="navbar">
  <header>Navbar</header>
    <li>
      <a class="nav-link" href="#Audi_A8">Audi A8</a>
      <a class="nav-link" href="#Mercedes-Benz_G-Class">Mercedes-Benz G-Class
</a>
      <a class="nav-link" href="#Lada_Niva">Lada Niva</a>
      <a class="nav-link" href="#Hyundai_Genesis_Coupe">Hyundai Genesis Coupe</a>
      <a class="nav-link" href="#Honda_Civic">Honda Civic</a>
    </li>
</nav>
</body>
</html>``` 
 ``` body{
  margin:0;
  padding:0;
  box-sizing:border-box;
  display:flex;
  color: #4d4e53;
  font-family: 'Open Sans', Arial, sans-serif;
  flex-direction:row-reverse;
}
nav{
  min-width:303.52px;
  display:flex;
  flex-direction:column;
  width:20%;
  text-align:center;
  
  
}
nav header{
  padding-top:1.5rem;
  padding-bottom:1rem;
  border-right:2px solid grey;
}

header{
  font-size:1.8rem;
  color:black;
}
 .nav-link{
   text-align:left;
   padding:0.7rem 0.7rem 0.7rem 1.5rem;
  text-decoration:none;
  color: #4d4e53;
  border-bottom:2px solid grey;
  border-right:2px solid grey;
}
nav > a:first-child{
  border-top:2px solid pink;
}
main{
  width:80%;
  margin:1.5rem 1rem 2rem 1.5rem;
  padding-bottom:2rem;

}
p{
 padding-left:1.5rem;
}
code
{ display:block;
 background-color: #f7f7f7;
  padding:1.2rem 1rem 1.2rem ;
  font-family: monospace;
  margin-left:2rem;
}

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:

Technical Documentation Page - Build a Technical Documentation Page

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:

Technical Documentation Page - Build a Technical Documentation Page

We will need to see your code in order to help you. Please paste both your HTML and CSS in here using the following method so we can see it properly.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

3 Likes

You’ve requested to delete the post but it would be easier for you to edit your post and paste in your full code as @bbsmooth suggests.

You are correct, linking your CSS to the HTML is not the problem. The problem is that you don’t have a media query in your CSS.

In other words, the “position” of the #navbar must “absolutely” always be touching the left side of the page.

Can you help me a little bit more what exactly do I need to do with “a media query in your CSS.”? I tried something like @media

Yep, you’re on the right track here. You need to use a media query to change something about the page when the query is triggered. Generally people use them to make changes to the page when the viewport is a certain width. That allows you to make the page more responsive because you can rearrange the elements on your page for narrower viewports.

You can do whatever you want. If you want to turn the background pink when the viewport is over a certain width then do it. If you want to change the font to cursive when the viewport is narrow then do it. You just need to use one media query in your CSS.

Media Query CSS Example – Max and Min Screen Width for Mobile Responsive Design

2 Likes

Thanks, now I understand it. Thank you for explaining me instead giving me the exact code that I need. In this way I understood this problem, and knew where to find an answer. I did it!

2 Likes

Awesome! I’m glad I was somewhat helpful.

Welcome to the wonderful world of programming. Most people think it’s just non-stop coding. But the majority of it is googling and reading documentation :slightly_smiling_face:

1 Like