Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

where should i put the media query

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta name="veiwpoint" content="width=device-width,inital-scale=1.0">
  </head>
  <body>
    <nav id="navbar">
      <header>Intro</header>
      <a class="nav-link" href="#Intro">Intro</a>
      <a class="nav-link" href="#Class">Class</a>
      <a class="nav-link" href="#Type">Type</a>
      <a class="nav-link" href="#Real">Real</a>
      <a class="nav-link" href="#Fake">Fake</a>
    </nav>
    <main id="main-doc">
      <section  class="main-section" id="Intro">
        <header>Intro</header>
        <li></li>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section  class="main-section"id="Class">
        <header>Class</header>
        <li></li>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section  class="main-section" id="Type">
        <header>Type</header>
        <li></li>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section  class="main-section" id="Real">
        <header>Real</header>
        <li></li>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section  class="main-section" id="Fake">
        <header>Fake</header>
        <li></li>
        <code></code>
        <p></p>
        <p></p>
      </section>
      @media(max-width: 500px) {
        .class{
          padding: 2rem;
        }
      }
    </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/120.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

The media query goes inside the style.css file, just like other styling properties. When the breakpoint or orientation is active, the style properties are actitived.

Happy coding

Hello @megacartenterprises !

As stated by @Teller, the @media query is entered into the css files.

Here is an article on media query.

If this helps you, please remember to check Solution by Teller

Keep up the good progress! :monkey_face: