Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening: Hello, i am almost through building my Technical Documentation page but i am quite stuck on where to add the @media query

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">   <style> @media(max-width: 1300px){
        body{
            border: 0;
        }

</style> 
  <title>Your Technical Documentation</title>  

    
</head>
<body>
    <nav id="navbar">
        <header>
            <h1>Technical Documentation Topic</h1>
        </header>
        <ul id="nav-list">
            <li><a class="nav-link" href="#introduction">Introduction</a></li>
            <li><a class="nav-link" href="#getting_started">Getting Started</a></li>
            <li><a class="nav-link" href="#advanced_features">Advanced Features</a></li>
            <li><a class="nav-link" href="#troubleshooting">Troubleshooting</a></li>
            <li><a class="nav-link" href="#conclusion">Conclusion</a></li>
        </ul>
    </nav>

    <main id="main-doc">
        <section class="main-section" id="introduction">
            <header>
                <h2><li>Introduction</li></h2>
            </header>
            <p>Content for Introduction...</p>
            <p>Additional content...</p>
            <code>Code snippet here...</code>
        </section>

        <section class="main-section" id="getting_started">
            <header>
                <h2><li>Getting Started</li></h2>
            </header>
            <p>Content for Getting Started...</p>
            <p>More content...</p>
            <code>Code snippet here...</code>
        </section>

        <section class="main-section" id="advanced_features">
            <header>
                <h2><li>Advanced Features</li></h2>
            </header>
            <p>Content for Advanced Features...</p>
            <p>Additional content...</p>
            <code>Code snippet here...</code>
        </section>

        <section class="main-section" id="troubleshooting">
            <header>
                <h2><li>Troubleshooting</li></h2>
            </header>
            <p>Content for Troubleshooting...</p>
            <p>Additional troubleshooting details...</p>
            <code>Code snippet here...</code>
        </section>

        <section class="main-section" id="conclusion">
            <header>
                <h2><li>Conclusion</li></h2>
            </header>
            <p>Summary and conclusion...</p>
            <p>Final thoughts...</p>
            <code>Final code example...</code>
        </section>
    </main>
</body>
</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/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

You can add it on any element, as long as the media query is correct.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.