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:
