Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
please help! problem with the media query

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content='width=device-width, initial-scale=1.0'>
  <link rel="stylesheet" href="styles.css">
  </head>
<body>

<nav id="navbar">
  <header>JS Documentation</header>
<ul>
  <li> <a class="nav-link" href="#Introduction" id="Introduction"> Introduction</a></li>

<li><a class="nav-link" href="#What_you_should_already_know" id="What you should already know">What you should already know</a></li>

<li><a class="nav-link" href="#JavaScript_and_Java" id="JavaScript and Java">JavaScript and Java</a></li>

<li><a class="nav-link" href="#Hello_world" id="Hello world">Hello world</a></li>

<li><a class="nav-link" href="#Variables" id="Variables">Variables</a></li>
</ul>
</nav>

  <main id="main-doc">

<section class="main-section" id="Introduction">
  <header>Introduction</header>
 <article> 
  <p></p>
  <p></p>
  <p></p>
  <code></code>
 </article>
</section>

<section class="main-section" id="What_you_should_already_know">
  <header>What you should already know</header>
  <article>
  <p></p>
  <code></code>
   <li></li>
  <li></li>
  <li></li>
  </article>
</section>

<section class="main-section" id="JavaScript_and_Java">
  <header>JavaScript and Java</header>
  <article>
  <p></p>
  <p></p>
  <code></code>
  </article>
</section>

<section class="main-section" id="Hello_world">
  <header>Hello world</header>
  <article>
  <p></p>
  <p></p>
  <code></code>
  </article>
</section>

<section class="main-section" id="Variables">
  <header>Variables</header>
  <article>
  <p></p>
  <p></p>
  <code></code>
  <li></li>
  <li></li>
  </article>
</section>

    </main>

<style>
 body {
   display: flex;
   margin: 0;
   width: 100%
 }

 nav {
   max-width: 300px;
   height: 100vh;
   background-color: grey;
 }

main {
  flex: 1;
  background-color: lightblue;
  overflow: scroll;
  width: 100%;
  height: auto;

}

* {
  box-sizing: border-box;
}

nav a {
  border-top: solid 1px #777;
  display: block;
  padding: 15px;
}

@media (max-width: 600px) {
  body {
    flex-direction: column;
  }
}

  </style>
 </body>

<html/>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Welcome to our community!

Your complete css code should be put in a file called “styles.css”. As you can see in your code you already have the link to this file within ‘head’ element:

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

Regarding media query, read the following explanation:

thanks for the tips,
fixed it and completed it :smile:

1 Like

don’t forget to mark this topic as solved by clicking Solution on the post that help you to solve it.
thanks.

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