Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I am still doing work on the html portion, making sure it works before I flesh it out.
My issue is with the “Your Technical Documentation project should use at least one media query.” No matter what I do or try to adjust it, I can’t get it to pass.
Below is the section with the media query on my stylesheet.
@media (min-width:258px) {
#navbar {
position: fixed;
}
}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content=""?
    <title>Technical Documentation Page</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <nav id="navbar">
    <header> III 
    </header>
      <a href="#Main_Technical_Information" class="nav-link">Main Technical Information</a><br />
      <a href="#Overview" class="nav-link">Overview</a><br />
<a href="#Installation_Instructions" class="nav-link">Installation Instructions</a><br />
<a href="#Troubleshooting" class="nav-link">Troubleshooting</a><br />
<a href="#Regional_Variations" class="nav-link">Regional Variations</a><br />
    </nav><br />
    <main id="main-doc">
      <section id="Main_Technical_Information" class="main-section">
        <header>Main Technical Information</header>
        <p>Ipsol Loreum</p>
        <p>
          <ul>
            <li><code>a1 + b2= c3</code></li>
          </ul>
        </p>
        <p>To save this section press <kbd>Ctrl + S</kbd></p>
      </section>
      <section id="Overview" class="main-section">
        <header>Overview</header>
        <p>Ipsol Loreum</p>
        <p>
          <ul>
            <li><code>a1 + b2= c3</code></li>
          </ul>
        </p>
        <p>To save this section press <kbd>Ctrl + S</kbd></p>
      </section>
      <section id="Installation_Instructions" class="main-section">
        <header>Installation Instructions</header>
        <p>Ipsol Loreum</p>
        <p>
          <ul>
            <li><code>a1 + b2= c3</code></li>
          </ul>
        </p>
        <p>To save this section press <kbd>Ctrl + S</kbd></p>
      </section>
      <section id="Troubleshooting" class="main-section">
        <header>Troubleshooting</header>
        <p>Ipsol Loreum</p>
        <p>
          <ul>
            <li><code>a1 + b2= c3</code></li>
          </ul>
        </p>
        <p>To save this section press <kbd>Ctrl + S</kbd></p>
      </section>
      <section id="Regional_Variations" class="main-section">
        <header>Regional Variations</header>
        <p>Ipsol Loreum</p>
        <p>
          <ul>
            <li><code>a1 + b2= c3</code></li>
          </ul>
        </p>
        <p>To save this section press <kbd>Ctrl + S</kbd></p>
        <p>To print this page press <kbd>Ctrl + P</kbd></p>
      </section>
    </main>
    <footer>Created by Bryan</footer>
  </body>
  </html>

/* file: styles.css */
* {  background-color: #3a3240;
}

a {
  color: #92869c;
}

a:hover {
background-color: #92869c;
  color: #3a3240;
}

#navbar {
  border-style: solid;
  border-width: 5px;
  border-color: #92869c;
  height: 100%;
  top: -5px;
  left: -5px;
  padding: 5px;
  text-align: center;
  color: #92869c
}

@media (min-width:258px) {
  #navbar {
    position: fixed;
  }
}

main {
  margin-left: 220px;
  color: #92869c
}

header {
  font-size: 20pt;
}

footer {
  text-align: center;
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

This is not the correct name of the stylesheet.

“Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS”

You are also missing a closing > on one of your meta tags.

3

Shoot, a silly mistake, thank you.

4

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