Responsive Web Design Projects - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.
hi y’all. plz tell me which part i did wrong on the" media query" part in this project? Thanks in advance
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html>
<head>
  <meta name="viewport" id="width=width-device, length=length-device">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="their_class">
      <header>their class</header>
      <p></p>
      <p></p>
       <p></p>
       <p></p>
      <p></p>
      <p></p>
      <p></p>
       <p></p>
       <p></p>
       <p></p>
             <code></code>
            <code></code>
            <code></code>
            <code></code>
            <code></code>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
 </section>
      <section class="main-section" id="my_class">
        <header>my class</header>
      </section>
        <section class="main-section" id="your_class">
          <header>your class</header>
        </section>
          <section class="main-section" id="her_class">
            <header>her class</header>
          </section>
    <section class="main-section" id="his_class">
      <header>his class</header>
      </section> 
            
      <nav id="navbar">
        <header>hi</header>
        <a class="nav-link" href="#their_class">their class</a>
        <a class="nav-link" href="#my_class">my class</a>
        <a class="nav-link" href="#your_class">your class</a>
        <a class="nav-link" href="#her_class">her class</a>
        <a class="nav-link" href="#his_class">his class</a>
      </nav>

  </main>
  </body>
<style>
 @media (max-width: 800px)
 {main 
 {height: 100px;
 width: 100px;
 display: none;
 
 }
 }
</style>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

you should not be using the style element for this exercise.
Move the css code into the styles.css file instead

1 Like

thanks, it helped! i passed

1 Like