Tell us what’s happening:
I have been working on the Technical Documentation project, since it was showing only one error (regarding the usage of media query atleast once in the code) even after I mentioned it twice in the code
Your code so far
body{
display:flex;
flex-direction: row;
font-family: 'Times New Roman', Times, serif;
color: black;
line-height: 1.5;
background-color: aliceblue;
}
header{
color: black;
font-size: 1.8em;
font-weight: bolder;
}
nav{
margin:10px;
}
nav header {
text-align: center;
font-family: ‘Times New Roman’, Times, serif;
color: black;
line-height: 1.5;
}
width:25%;
height:65vh;
}
#main-doc{
width:75%;
height:100vh;
margin:20px;
text-align: justify;
}
.nav-link{
font-family: ‘Times New Roman’, Times, serif;
color: black;
line-height: 1.5;
text-decoration: none;
text-align: center;
font-size: 100%;
}
#ul-navbar{
list-style-type: none;
}
#ul-navbar li{
border-bottom: 1px solid black;
padding :10px 0;
}
code{
background-color: #f7f7f7;
display:block;
padding:20px;
text-align: left;
width:70%;
border-radius: 5%;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#ul-navbar {
border: 1px solid;
height: 425px;
width:100%;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 500px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 50px;
margin-top: 500px;
}
}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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: