Responsive Web Design Projects - Build a Technical Documentation Page

I read through the forum but still couldn’t pass the last condition: “Your Technical Documentation project should use at least one media query.” Please help.

Thanks,

Your code so far

<!-- file: index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
<style{

  @media screen and (max-width: 400px) {
  #main-doc {
      background-color: green;
      color:white;
  }
}

@media (min-width: 720px){ 
  p { 
    display: none; 
    } 
  } 
}
@media only screen and (min-width: 350px) and (max-width: 1199px) { #navbar {
  position: left;
}
   }
</style>

</head>

<body>
  <main id="main-doc">
    <section class="main-section" id="section_one">
      <header>Section one</header>
      <p>1st p element</p>
      <p>2nd p element</p>
      <p>3rd p element: The navbar element should contain one header element which contains text that describes the topic of the technical documentation
</p>
      <p>4th p element</p>
      <p>5th p element</p>
      <li>1: Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS </li>
      <li>2: Happy Coding! </li>
      <li>3: Fulfill the user stories and pass all the tests below to complete this project.</li>
      <li>4</li>
      <li>5: Give it your own personal style.</li>
    </section>
    <section class="main-section" id="section_two">
      <header>Section two</header>
      <p>6th p element: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
</p>
      <p>7th p element</p>
      <li>6</li>
      <li>7</li>
    </section>
    <section class="main-section" id="section_three">
      <header>Section three</header>
      <p>8th p element</p>
      <p>9th p element</p>
      <li>8</li>
      <li>9</li>
      <code>
      x = 5;
      y = 6;
      z = x + y;
      </code>
      <code>
      x = 5;
      y = 6;
      z = x + y;
      </code>
    </section>
    <section class="main-section" id="section_four">
      <header>Section four</header>
      <p>10th p element: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
</p>
      <li>10</li>
      <code>
      x = 5;
      y = 6;
      z = x + y;
      </code>
      <code>
      x = 5;
      y = 6;
      z = x + y;
      </code>
    </section>
    <section class="main-section" id="section_five">
      <header>Section five</header>
      <p>11th p element: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
</p>
      <li>11</li>
      <code>
      x = 5;
      y = 6;
      z = x + y;
      </code>

    </section>
  </main>


  <nav id="navbar">
    <header>text that describes the topic of the technical documentation:</header>
    <a href="#section_one" class="nav-link">Section one</a>
    <a href="#section_two" class="nav-link">Section two</a>
    <a href="#section_three" class="nav-link">Section three</a>
    <a href="#section_four" class="nav-link">Section four</a>
    <a href="#section_five" class="nav-link">Section five</a>
  </nav>

</body>
/* file: styles.css */
@media screen and (max-width: 400px) {
  #main-doc {
      background-color: green;
      color:white;
  }
}
@media only screen and (min-width: 350px) and (max-width: 1199px) { #navbar {
  position: left;
}
   }
@media (min-width:720px){ 
  p { 
    display: none; 
    } 
  } 
  #navbar{
  position: fixed;
  left:0px;
  top:0px;
  padding: 26px;
  background-color: yellow;
  width:10%;
  display: flex;
  flex-direction: column;
}

main{
  padding:100px 0 300px 90px;
}

.main-section{
  border: solid;
  padding:100px 0 100px 0;

}

.nav-link{
    margin: solid;
    padding: 20px;;

}

@media screen and (min-width: 600px){#navbar{
  position: fixed;
  left:0px;
  top:50px;
  padding: 26px;
  background-color: blue;}

}

@media(min-width: 300px){
  .main-section{
  background-color: red;
}
}


Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

You need to write your CSS code inside the styles.css file, not index.html to pass the test.

Also be careful with syntax. I see some issues.

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