Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

It still says that my project should use at least one media query. But the stylesheet link is correct set to “styles.css” and a @media query is also on place in my css file. Can’t find my failure?

  **Your code so far**

/* file: index.html */

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0“ >
<link rel="stylesheet" href="styles.css" >
</head>
<main id="main-doc">
  <nav id="navbar">
  <header>Documentation</header>
  </nav> 
  <section class="main-section" id="Kapitel_1">
    <header>Kapitel 1</header>
    <nav id="navbar">
      <a class="nav-link" href="#Kapitel_1">Kapitel 1</a>
    </nav>
    <p>P1</p>
    <p>P2</p>
    <p>P3</p>
    <code>Code</code>
    <li></li>
  </section>
  </br>
  <section class="main-section" id="Kapitel_2">
    <header>Kapitel 2</header>
    <nav id="navbar">
        <a class="nav-link" href="#Kapitel_2">Kapitel 2</a>
    </nav>
    <p>P1</p>
    <p>P2</p>
    <p>P3</p>
    <code>Code</code>
    <li></li>
  </section>
  </br>
  <section class="main-section" id="Kapitel_3">
    <header>Kapitel 3</header>
    <nav id="navbar">
      <a class="nav-link" href="#Kapitel_3">Kapitel 3</a>
    </nav>
    <p>P4</p>
    <p>P5</p>
    <p>P6</p>
    <code>Code</code>
    <li></li>
  </section>
  </br>
  <section class="main-section" id="Kapitel_4">
    <header>Kapitel 4</header>
    <nav id="navbar">
        <a class="nav-link" href="#Kapitel_4">Kapitel 4</a>
    </nav>
    <p>P7</p>
    <p>P8</p>
    <p>P9</p>
    <code>Code</code>
    <li></li>
  </section>
  </br>
  <section class="main-section" id="Kapitel_5">
    <header>Kapitel 5</header>
    <nav id="navbar">
        <a class="nav-link" href="#Kapitel_5">Kapitel 5</a>
    </nav>
    <p>P10</p>
    <code>Code</code>
    <li></li>
  </section>
</main>
<html>

/* file: styles.css */
html {
scroll-behavior: smooth;
}

@media (min-width: 768px) {
#navbar {
  margin-left: 0px;
  display: absolute;
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Look at the syntax highlighting. There is a bug somewhere. Double check all of your quotation marks.

3

Perfect, thx. Who have thought that only a `` instead of a " could cause only one problem and not all at once. It better seems to type really every letter on my own instead of taking wrong generated boiling snippets for ever repeating meta-tags. Thanks a lot!

1 Like
4

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