Greetings
Working on this frustrating project here, and I keep getting a return error about the “media query” not being included… May I please have someone look over my code to inform me about my error
Greetings
Working on this frustrating project here, and I keep getting a return error about the “media query” not being included… May I please have someone look over my code to inform me about my error
Did you add a link to an external CSS file in your HTML document?
Please post your code here.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
nav {
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
overflow-y: auto;
}
nav header {
padding: 10px;
text-align: center;
}
nav a.nav-link {
display: block;
padding: 10px;
text-decoration: none;
color: #fff;
transition: background-color 0.3s;
}
nav a.nav-link:hover {
background-color: #555;
}
main {
margin-left: 200px;
padding: 20px;
}
section {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
}
code {
font-family: monospace;
}
@media (max-width: 768px) {
nav {
width: 100%;
position: relative;
}
main {
margin-left: 0;
}
}
Indeed have an link element . Here’s the preview
<!DOCTYPE html>
<html>
<head>
<title>Technical Documentation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="navbar">
<header>
<h1>Navigation</h1>
</header>
<a class="nav-link" href="#section_one">Section One</a>
<a class="nav-link" href="#section_two">Section Two</a>
<a class="nav-link" href="#section_three">Section Three</a>
<a class="nav-link" href="#section_four">Section Four</a>
<a class="nav-link" href="#section_five">Section Five</a>
</nav>
<main id="main-doc">
<section id="section_one" class="main-section">
<header>Section One</header>
<p>This is the content for Section One.</p>
<p>More content in Section One.</p>
<code>Code snippet in Section One.</code>
<li>List item in Section One.</li>
</section>
<section id="section_two" class="main-section">
<header>Section Two</header>
<p>This is the content for Section Two.</p>
<p>More content in Section Two.</p>
<code>Code snippet in Section Two.</code>
<li>List item in Section Two.</li>
</section>
<section id="section_three" class="main-section">
<header>Section Three</header>
<p>This is the content for Section Three.</p>
<p>More content in Section Three.</p>
<code>Code snippet in Section Three.</code>
<li>List item in Section Three.</li>
</section>
<section id="section_four" class="main-section">
<header>Section Four</header>
<p>This is the content for Section Four.</p>
<p>More content in Section Four.</p>
<code>Code snippet in Section Four.</code>
<li>List item in Section Four.</li>
</section>
<section id="section_five" class="main-section">
<header>Section Five</header>
<p>This is the content for Section Five.</p>
<p>More content in Section Five.</p>
<code>Code snippet in Section Five.</code>
<li>List item in Section Five.</li>
</section>
</main>
</body>
</html>
check this one is it a style.css or styles.css ?
HAHAHA
Rookie mistake I do see the problem! I couldn’t believe I was blind not to see that!!
Thank You So Much
Cheers Mate!
Sure, I can help. Please provide your code or specify the problem you’re facing with the “media query” so I can assist you effectively.
Thank you for your concern. The issue has been solved
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.