Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

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:

2

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:

3

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

1 Like
4

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

5

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