Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Hello, I am stuck in the step 15 for the technical documentation page.
This step says
“Your technical documentation should use at least one media query”.
I have already added , but it is not working when I run the code.
Can someone guide me with identifying with what I’m missing?
Thank you!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
      <p></p>
  </section>
  <section class="main-section" id="What_you_should_already_know">
    <header>What you should already know</header>
      <p></p>
  </section>
  <section class="main-section" id="JavaScript_and_Java">
    <header>JavaScript and Java</header>
      <p></p>
  </section>
  <section class="main-section" id="Hello_world">
    <header>Hello world</header>
      <p></p>
        <code></code>
  </section>
  <section class="main-section" id="Variables">
    <header>Variables</header>
      <p></p>
      <p></p>
        <code></code>
        <code></code>
        <code></code>
      <p></p>
        <code></code>
        <code></code>
      <p></p>
      <p></p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      <p></p>
        <nav id="navbar">
    <header>Topic of technical documentation</header>  
         <a class="nav-link" href="#Introduction">Introduction</a>
         <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
         <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
         <a class="nav-link" href="#Hello_world">Hello world</a>
         <a class="nav-link" href="#Variables">Variables</a>
        </nav>
  </section>
  </main>
</body>
  </html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi there. You haven’t added a media query rule to the styles.css file, it’s empty.

3

Thank you for you answer. I just added a couple of rules and still doesn’t work.

4

Post your code here in your reply. Use three back ticks (```) on a separate line before and after your code to preform it here in the post.

1 Like
5 
#navbar {
  background-color: red;
}

#main-doc {
  background-color: blue;
}
6

you need to add @media rules, those are not @media rules

1 Like
7

I got it! Thank you all so much!