I read through the forum but still couldn’t pass the last condition: “Your Technical Documentation project should use at least one media query.” Please help.
Thanks,
Your code so far
<!-- file: index.html -->
<head>
<link rel="stylesheet" href="styles.css">
<style{
@media screen and (max-width: 400px) {
#main-doc {
background-color: green;
color:white;
}
}
@media (min-width: 720px){
p {
display: none;
}
}
}
@media only screen and (min-width: 350px) and (max-width: 1199px) { #navbar {
position: left;
}
}
</style>
</head>
<body>
<main id="main-doc">
<section class="main-section" id="section_one">
<header>Section one</header>
<p>1st p element</p>
<p>2nd p element</p>
<p>3rd p element: The navbar element should contain one header element which contains text that describes the topic of the technical documentation
</p>
<p>4th p element</p>
<p>5th p element</p>
<li>1: Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS </li>
<li>2: Happy Coding! </li>
<li>3: Fulfill the user stories and pass all the tests below to complete this project.</li>
<li>4</li>
<li>5: Give it your own personal style.</li>
</section>
<section class="main-section" id="section_two">
<header>Section two</header>
<p>6th p element: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
</p>
<p>7th p element</p>
<li>6</li>
<li>7</li>
</section>
<section class="main-section" id="section_three">
<header>Section three</header>
<p>8th p element</p>
<p>9th p element</p>
<li>8</li>
<li>9</li>
<code>
x = 5;
y = 6;
z = x + y;
</code>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</section>
<section class="main-section" id="section_four">
<header>Section four</header>
<p>10th p element: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
</p>
<li>10</li>
<code>
x = 5;
y = 6;
z = x + y;
</code>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</section>
<section class="main-section" id="section_five">
<header>Section five</header>
<p>11th p element: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
</p>
<li>11</li>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</section>
</main>
<nav id="navbar">
<header>text that describes the topic of the technical documentation:</header>
<a href="#section_one" class="nav-link">Section one</a>
<a href="#section_two" class="nav-link">Section two</a>
<a href="#section_three" class="nav-link">Section three</a>
<a href="#section_four" class="nav-link">Section four</a>
<a href="#section_five" class="nav-link">Section five</a>
</nav>
</body>
/* file: styles.css */
@media screen and (max-width: 400px) {
#main-doc {
background-color: green;
color:white;
}
}
@media only screen and (min-width: 350px) and (max-width: 1199px) { #navbar {
position: left;
}
}
@media (min-width:720px){
p {
display: none;
}
}
#navbar{
position: fixed;
left:0px;
top:0px;
padding: 26px;
background-color: yellow;
width:10%;
display: flex;
flex-direction: column;
}
main{
padding:100px 0 300px 90px;
}
.main-section{
border: solid;
padding:100px 0 100px 0;
}
.nav-link{
margin: solid;
padding: 20px;;
}
@media screen and (min-width: 600px){#navbar{
position: fixed;
left:0px;
top:50px;
padding: 26px;
background-color: blue;}
}
@media(min-width: 300px){
.main-section{
background-color: red;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Technical Documentation Page
Link to the challenge: