Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Describe your issue in detail here.

Media query isn’t registering for some reason, not sure why

Your code so far

<header>Topic</header>

<a class='nav-link' href="#filler_text_1">Filler Text 1</a>
<a class='nav-link' href="#filler_text_2">Filler Text 2</a>
<a class='nav-link' href="#filler_text_3">Filler Text 3</a>
<a class='nav-link' href="#filler_text_4">Filler Text 4</a>
<a class='nav-link' href="#filler_text_5">Filler Text 5</a>
<header>Filler Text 1</header>

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

<code></code>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

</section>
<header>Filler Text 2</header>

<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>

<code></code>

</section>
<header>Filler Text 3</header>

<p>This is paragraph 5.</p>
<p>This is paragraph 6.</p>

<code></code>

</section>
<header>Filler Text 4</header>

<p>This is paragraph 7.</p>
<p>This is paragraph 8.</p>

<code></code>

</section>
<header>Filler Text 5</header>

<p>This is paragraph 9.</p>
<p>This is paragraph 10.</p>

<code></code>

</section>

#navbar {
position: fixed;
left: 0;
padding: 20px;

#navbar header {
font-size: 1.618em;
margin-bottom: 7;

}

#navbar a {
text-decoration: none;
display: block;
margin-bottom: 12px;
}

#main-doc {
margin-left: 200px;
}
@media (max-height: 600px) {
.main-section: {
font-size: .7em;
}
}

<!-- file: index.html -->
<main id="main-doc">

  <link rel="stylesheet" href="./styles.css">

  <nav id="navbar">

    <header>Topic</header>

    <a class='nav-link' href="#filler_text_1">Filler Text 1</a>
    <a class='nav-link' href="#filler_text_2">Filler Text 2</a>
    <a class='nav-link' href="#filler_text_3">Filler Text 3</a>
    <a class='nav-link' href="#filler_text_4">Filler Text 4</a>
    <a class='nav-link' href="#filler_text_5">Filler Text 5</a>
</nav>
    

  <section class="main-section" id="filler_text_1">

    <header>Filler Text 1</header>

    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    
    <code></code>

    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    </section>
  <section class="main-section" id="filler_text_2">

    <header>Filler Text 2</header>

    <p>This is paragraph 3.</p>
    <p>This is paragraph 4.</p>

    <code></code>

    </section>
  <section class="main-section" id="filler_text_3">

    <header>Filler Text 3</header>

    <p>This is paragraph 5.</p>
    <p>This is paragraph 6.</p>

    <code></code>

    </section>
  <section class="main-section" id="filler_text_4">

    <header>Filler Text 4</header>

    <p>This is paragraph 7.</p>
    <p>This is paragraph 8.</p>

    <code></code>

    </section>
  <section class="main-section" id="filler_text_5">

    <header>Filler Text 5</header>

    <p>This is paragraph 9.</p>
    <p>This is paragraph 10.</p>

    <code></code>

    </section>
</main>

/* file: styles.css */
#navbar {
  position: fixed;
  left: 0;
  padding: 20px;

#navbar header {
  font-size: 1.618em;
  margin-bottom: 7;

}

#navbar a {
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}

#main-doc {
  margin-left: 200px;
}
@media (max-height: 600px) {
  .main-section: {
    font-size: .7em;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

Try to add only screen and after media
And you didn’t have head and body elements in your html file.
@samuelamelcher

Still didn’t work for some reason, thank you for your help

#navbar {
position: fixed;
left: 0;
padding: 20px;

#navbar header {
font-size: 1.618em;
margin-bottom: 7;

}

#navbar a {
text-decoration: none;
display: block;
margin-bottom: 12px;
}

#main-doc {
margin-left: 200px;
}
@media only screen and (max-height: 600px) {
.main-section: {
font-size: 7em;
}
}
am i missing something syntax-wise? I also added head & body to html

If you added your head and body elements at correct position, then modified that:

Remove that : colon from your class .main-section:
@samuelamelcher

Did so, still not working but maybe head/body is in the wrong place? Here is full as stands:

<header>Topic</header>

<a class='nav-link' href="#filler_text_1">Filler Text 1</a>
<a class='nav-link' href="#filler_text_2">Filler Text 2</a>
<a class='nav-link' href="#filler_text_3">Filler Text 3</a>
<a class='nav-link' href="#filler_text_4">Filler Text 4</a>
<a class='nav-link' href="#filler_text_5">Filler Text 5</a>
<header>Filler Text 1</header>

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

<code></code>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

</section>
<header>Filler Text 2</header>

<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>

<code></code>

</section>
<header>Filler Text 3</header>

<p>This is paragraph 5.</p>
<p>This is paragraph 6.</p>

<code></code>

</section>
<header>Filler Text 4</header>

<p>This is paragraph 7.</p>
<p>This is paragraph 8.</p>

<code></code>

</section>
<header>Filler Text 5</header>

<p>This is paragraph 9.</p>
<p>This is paragraph 10.</p>

<code></code>

</section>
</body>
</head>

Thanks again for your help mate, apologies this is taking so long

Let’s go back to your original CSS pasted in your first comment:

#navbar {
  position: fixed;
  left: 0;
  padding: 20px;

#navbar header {
  font-size: 1.618em;
  margin-bottom: 7;

}

Do you see a problem here? That is the only issue I had to fix to get it to pass. But you do actually have another error that the tests aren’t catching:

@media (max-height: 600px) {
  .main-section: {
    font-size: .7em;
  }
}

There shouldn’t be a colon at the end of the selector list.

1 Like

You didn’t have proper html boilerplate for you content.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<link>
<title></title>
<meta>
</head>
<body>

<!-- Your whole content goes between the body opening and closing tags here -->

</body>
</html>

@samuelamelcher

While this is true, it is not needed to pass the tests. Perhaps it should be? But the point is that not having this HTML has nothing to do with the original issue of why the media query isn’t working. That is due to an error at the beginning of the CSS which I pointed out above.

This issue I quoted early before your post Sir.
@bbsmooth

And thanks for that knowledge, I didn’t known it before.
@bbsmooth