Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

hello everybody, I can’t manage to complete the following step: “Your Technical Documentation project should use at least one media query.” I can’t recall very well the use of media query, I need help. Thank you

   **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>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
<a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
<a class="nav-link" href="#Hello_world">Hello world</a>
<a class="nav-link" href="#Variables">Variables</a>
</nav> 


<main id="main-doc">

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

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

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

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

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















</main> </body>

</html>

/* file: styles.css */
body {
   background-color: #f6f2f2;
   color: black;
   font-family: Verdana, Arial, sans-serif;
}

header {
   font-size: 1.5em;
   font-weight: bold;
}

#navbar {
   position: fixed;
   display: inline-block;
   width: 300px;
   height: 100%;
   top: 0px;
   left: 0px;
   border-right: solid;
   border-color: black;
   background-color: #f3f2f2;
   line-height: 2.5;
   overflow: auto;
}
#main-doc {
   position: absolute;
   left: 300px;
   padding: 25px;
   top: 0px;
   line-height: 1.8;
}

#navbar a {
   display: block;
   cursor: pointer;
   text-decoration: none;
   font-size: 1em;
   color: black;
   border-top: 1px solid;
   border-width: 100%;
   padding: 10px;
   margin-left: auto;

   #navbar header {
   display: block;
   margin-left: 15px;
   margin-right: 15px;
}


@media (max-width: 992px) {
.navbar {
  float: left;
}
}
@media (max-width: 600px) {
#nav {
  float: left;
}
}


   **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Its in here, did you skip this part? :eyes:

(Step 27, and the next few parts)

4

There is a syntax error here. Do you notice the red squiggly lines over your editor?

5

As for media query, I wrote this:

@media (max-width: 600px) {
#navbar {
width: 358px;
}
.nav-link {
width: 318px;
}

6

Try fixing the syntax error first bro, Make sure the red squiggly line in YOUR editor is no longer present.

Then we can talk about the media queries :call_me_hand:

7

I managed to fix the mistake, thank you :wink:

8

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