Tell us what’s happening:
i couldn’t find any problem with my code
but after running the tests
it is saying i have no media query but i have one in my css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
background-color: #000;
color: #f8f9fa;
}
#navbar {
width: 280px;
min-width: 200px;
background-color: #333;
border-right: 1px solid #0bb;
padding: 20px 0;
box-sizing: border-box;
position: fixed;
height: 100%;
overflow-y: auto;
box-shadow: 2px 0 5px rgba(255, 255, 255, 0.1);
}
#navbar header {
font-size: 1.6em;
font-weight: bold;
padding: 0 20px 15px;
border-bottom: 1px solid #666;
margin-bottom: 15px;
text-align: center;
color: #8be9fd;
}
#navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
#navbar li {
border-bottom: 1px solid #444;
}
#navbar li:last-child {
border-bottom: none;
}
#navbar .nav-link {
display: block;
padding: 12px 20px;
text-decoration: none;
color: #e0e0e0;
transition: background-color 0.2s ease, color 0.2s ease;
}
#navbar .nav-link:hover {
background-color: #555;
color: #00bcd4;
}
#main-doc {
margin-left: 280px;
padding: 30px;
flex-grow: 1;
background-color: #1a1a1a;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
border-radius: 8px;
margin: 20px;
align-self: flex-start;
min-height: calc(100vh - 40px);
color: #f0f0f0;
}
.main-section {
margin-bottom: 45px;
}
.main-section header {
font-size: 2.2em;
font-weight: bold;
margin-bottom: 25px;
color: #8be9fd;
border-bottom: 2px solid #666;
padding-bottom: 12px;
}
.main-section h3 {
font-size: 1.4em;
margin-top: 30px;
margin-bottom: 15px;
color: #e0e0e0;
}
.main-section p {
line-height: 1.7;
margin-bottom: 18px;
color: #cccccc;
}
.main-section ul {
list-style-type: disc;
margin-left: 30px;
margin-bottom: 20px;
}
.main-section ul li {
margin-bottom: 10px;
line-height: 1.6;
color: #cccccc;
}
.main-section ul li strong {
color: #f0f0f0;
}
.main-section code {
display: block;
background-color: #444;
border: 1px solid #666;
border-left: 5px solid #00bcd4;
border-radius: 6px;
padding: 18px;
margin: 25px 0;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95em;
overflow-x: auto;
white-space: pre-wrap;
color: #f8f8f2;
}
.main-section a {
color: #00bcd4;
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.main-section a:hover {
text-decoration: underline;
color: #8be9fd;
}
@media (max-width: 1024px) {
body {
flex-direction: column;
align-items: center;
}
#navbar {
position: relative;
width: 100%;
height: auto;
border-right: none;
border-bottom: 1px solid #666;
padding-bottom: 0;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}
#navbar header {
text-align: left;
padding-left: 20px;
font-size: 1.5em;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px 0;
}
#navbar li {
border-bottom: none;
border-right: 1px solid #444;
}
#navbar li:last-child {
border-right: none;
}
#navbar .nav-link {
padding: 8px 12px;
font-size: 0.9em;
}
#main-doc {
margin-left: 0;
padding-top: 20px;
margin: 15px;
width: calc(100% - 30px);
box-shadow: none;
border-radius: 0;
min-height: auto;
}
.main-section header {
font-size: 1.8em;
margin-bottom: 20px;
}
.main-section p {
font-size: 0.9em;
}
.main-section ul {
margin-left: 20px;
}
.main-section code {
padding: 15px;
font-size: 0.85em;
margin: 20px 0;
}
@media (max-width: 768px) {
#navbar header {
font-size: 1.3em;
padding-left: 15px;
}
#navbar .nav-link {
padding: 6px 10px;
font-size: 0.85em;
}
#main-doc {
padding: 15px;
margin: 10px;
width: calc(100% - 20px);
}
.main-section header {
font-size: 1.5em;
margin-bottom: 15px;
}
.main-section p, .main-section ul li {
font-size: 0.88em;
}
.main-section code {
padding: 12px;
font-size: 0.8em;
margin: 15px 0;
}
}
@media print {
body {
font-family: 'Times New Roman', serif;
color: black;
background-color: white;
}
#navbar {
display: none;
}
#main-doc {
margin-left: 0;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 20px;
}
.main-section code {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
}
}
Your code so far
<!-- file: index.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/136.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
