Tell us what’s happening:
I input the media query and it says I still need to add one.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE>
<html><head><base href="https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page">
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>/* General */
html. body {
font-family: 'Roboto', sans-serif;
height: 100%;
margin: 0;
}
/* code */
code {
background-color: #f5f5f5;
display: block;
width: 100%;
margin: 0 auto;
font-size: 20px;
}
/* Headers */
.main-section {
font-size: 24px;
}
header {
font-weight: bolder;
}
#navbar h1 {
color: white;
text-align: center;
text-transform: uppercase;
}
.main-section{
color: #36B1BF;
text-align: center;
/*textcolor*/
}
/* Navbar */
nav ul {
list-style: none;
font-size: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
border-bottom: 2px solid white;
}
.nav-link
}
/* Positioning */
#navbar {
width: 20%;
height: 100%;
position: fixed;
border-right: 5px solid #36B1BF;
background-color: #F2385A;
}
/* Main area */
#main-doc {
width: 80%;
height: auto;
position: absolute;
right: 0;
}
.main-section {
width: 90%;
display: block;
margin: 0 auto;
padding-bottom: 20px;
}
/* Media query */
@media (min-width:200px){
p {
font-size: 20;
border: 1px solid;
}
}
/* Other */
hr {
color: #36B1BF;
border-top: 3px solid #36B1BF;
margin-top: -10px;
}</style></head>
<body>
<div>
<nav id="navbar">
<header id="#navtitle"><h1>Technical Documentation</h1></header> </nav>
<ul>
<nav id="navbar"> <li><a class="nav-link" href="#Kitty">Kitty</a></li>
</nav>
<nav id="navbar"> <li><a class="nav-link" href="#Ipsum">Ipsum</a></li>
</nav>
<nav id="navbar"> <li><a class="nav-link" href="#Dolor">Dolor</a></li>
</nav>
<nav id="navbar"> <li><a class="nav-link" href="#Sit">Sit</a></li>
</nav>
<nav id="navbar"> <li><a class="nav-link" href="#Amet">Amet</a></li>
</nav>
<nav id="navbar"> <li><a class="nav-link" href="#Shed">Shed</a></li>
</nav>
</ul>
</div>
<main id="main-doc">
<section class="main-section" id="Kitty">
<header><h1>Kitty</h1></header>
<hr>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</section>
<section class="main-section" id="Ipsum">
<header><h1>Ipsum</h1></header>
<hr>
<p>Kitty .</p>
<p>Kitty.</p>
<code>:checked</code>
<ul>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</section>
<section class="main-section" id="Dolor">
<header><h1>Dolor</h1></header>
<hr>
<p>Kitty</p>
<p>Kitty .</p>
<code>:checked</code>
</section>
<section class="main-section" id="Sit">
<header><h1>Sit</h1></header>
<hr>
<p>Kitty.</p>
<p>Kitty.</p>
<code>:default</code>
</section>
<section class="main-section" id="Amet">
<header><h1>Amet</h1></header>
<hr>
<p>Kitty </p>
<p>Kitty</p>
<code>:please work</code>
</section>
<section class="main-section" id="Shed">
<header><h1>Shed</h1></header>
<hr>
<p>Kitty</p>
<p>Kitty</p>
<p>Yeet</p>
<code>:please</code>
</section>
</main>
</body></html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 OPR/86.0.4363.59
Challenge: Build a Technical Documentation Page
Link to the challenge:
