Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
i am trying to create @media query for my technical documentation project and it i am having troubles with it.

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> 
</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 appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

1 Like
3

Umm… can we see your CSS code as well?

Paste it between the ```` marks that appear when clicking the </> button:

Screenshot 2023-08-22 225654
Screenshot 2023-08-22 2256541318×368 37.8 KB

Well done on editing your post to properly describe the problem :clap:
Happy Coding!

4

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