User #15 Tech Doc Failed

Tell us what’s happening:
Though I looked for an answer in the forums I was not able to find one. I apologize if this is a repeat question.

I am having difficulty passing the User Story #15.

Is there something I am missing about @media? Honestly, I am still not able to wrap my head about how this at-rule works :sweat_smile:. Open to suggestions. Thanks!

Your code so far
Link to CodePen:

@media (max-width: 850px) {
  #navbar {
    padding: 0;
    margin: 0;
    width: auto;
    border: 1px solid rgba(0, 22, 22, 0.4);
    max-height: auto;
    left: 0;
    position: static;
<nav id="navbar">
    <header id="nav-header">Hello World</header>
      <li><a href="#First_Header" class="nav-link">First Header</a></li>
      <li><a href="#Second_Header" class="nav-link">Second Header</a></li>
      <li><a href="#Third_Header" class="nav-link">Third Header</a></li>
      <li><a href="#Fourth_Header" class="nav-link">Fourth Header</a></li>
      <li><a href="#Fifth_Header" class="nav-link">Fifth Header</a></li>

Error info:

1. On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn't scroll with the page content.
(Please run this test in a larger window (before any media queries) : expected 836 to be above 850
AssertionError: Please run this test in a larger window (before any media queries) : expected 836 to be above 850)

Challenge: Build a Technical Documentation Page

Link to the challenge:

Are you running the test when your browser is wide enough to have the menu on the left hand side? When I do then it passes for me.

1 Like

Wow. I am so embarrassed :duck:

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