Technical Documentation Page - Build a Technical Documentation Page

My code does not pass because they’re visibely not media query
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <link rel="stylesheet" href="styles.css">
    <style>
        @media screen and (max-width: 768px){
            #Rugby{
          background-color: red;
          text-align:center;
            }

        }
    </style>
</head>
<body>
    <nav id="navbar">
        <header>
            <h1> Technical Documentation</h1>
        </header>
        <a class="nav-link" href="#Rugby">Rugby</a>
        <a class="nav-link" href="#Football">Football</a>
        <a class="nav-link" href="#Cycling">Cycling</a>
        <a class="nav-link" href="#Natation">Natation</a>
        <a class="nav-link" href="#Chess">Chess</a>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Rugby">
            <header>
                <h2>Rugby</h2>
            </header>
            <p>Content about rugby...</p>
            <code>code example</code>
            <ol>
                <p><li>Ovale</li></p>
                <p><li>Drop</li></p>
                <p><li>Team of XV</li></p>
                <p><li>6 Nations</li></p>
                <p><li>New Zealand</li></p>
            </ol>
        </section>
        <section class="main-section" id="Football">
            <header>
                <h2>Football</h2>
            </header>
            <p>Content about football...</p>
            <code>code example</code>
            <ol>
                <p><li>Round</li></p>
                <p><li>Shoot</li></p>
                <p><li>Team of XI</li></p>
                <p><li>Champion's League</li></p>
                <p><li>Marseille</li></p>
            </ol>
        </section>
        <section class="main-section" id="Cycling">
            <header>
                <h2>Cycling</h2>
            </header>
            <p>Content about cycling...</p>
            <code>code example</code>
            <ol>
                <p><li>Frame</li></p>
                <p><li>Accident</li></p>
                <p><li>Individual</li></p>
                <p><li>Tourmalet</li></p>
                <p><li>Armstrong</li></p>
            </ol>
        </section>
        <section class="main-section" id="Natation">
            <header>
                <h2>Natation</h2>
            </header>
            <p>Content about natation...</p>
            <code>code example</code>
            <ol>
                <p><li>Water</li></p>
                <p><li>Diving</li></p>
                <p><li>Individual</li></p>
                <p><li>Jo</li></p>
                <p><li>Bernard</li></p>
            </ol>
        </section>
        <section class="main-section" id="Chess">
            <header>
                <h2>Chess</h2>
            </header>
            <p>Content about chess...</p>
            <code>code example</code>
            <ol>
                <p><li>Queen</li></p>
                <p><li>Chess and Maths</li></p>
                <p><li>Individual</li></p>
                <p><li>Tarthakover</li></p>
                <p><li>La joueuse de Dames</li></p>
            </ol>
        </section>
    </main>
</body>
</html>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Put your media query in the stylesheet that you linked to

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