I have added media query but it's still not working

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
/* file: index.html */
<!DOCTYPE HTML >
<html>
<head>
<Link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device -width, initial-scale=1.0"/>
</head>
<body>

<main id="main-doc">
  <section class ="main-section " id="Birth_of_Ojadile"><header>Birth of Ojadile</header >
  <p>Ojadile was the sole male and last child of his parents: </p>
  <ul ><li>one </li >
  <li>two </li>
  </ul >
      <p>He was born in <code>Amandine</code > Lokoja </p>

  </section>

      <section class ="main-section " id="Travails_of_a_youth"><header>Travails of a youth</header>
         <p>When he was but a teen, his father passed away:</p>
         <ul>
             <li>three </li>
             <li >four </li >
             </ul >
          <p>He had to balance between managing his father's business and taking  care if the why<code>family</code> </p>
      
               </section>

          <section class ="main-section " id="A_new_dawn"><header>A  new dawn </header >
              <p>Due to his faithfulness and diligence to his work the business <code>prospered</code> </p>
                  <p>He started opening branches in several  locations  and places </p>

          </section>

              <section class ="main-section " id="Battle_of_kings"><header>Battle of kings</header >
                  <p>He encountered numerous envious people  who don't like how successful he has become:</p>
              <ul><li>five </li></ul >
                      <p>Ojadile overcame  all adversities  because  of his <code>unyielding</code> spirit </p>

              </section>
                  <section class ="main-section "id="Fall_of_an_emperor"><header>Fall of an emperor </header>
                      <p>Ojadile lived  a good  life and was helpful to the <code>society</code></p>
                          <p>The sun rises and set so is a the death of a <code>noblenoble</code >  natural </p>
                          </section>
                  
  </main>
  <nav id="navbar">
      <header>Nav links </header >
        <a href="#Birth_of_Ojadile" class ="nav-link">Birth of Ojadile</a >
                                              <a href="#Travails_of_a_youth" class="nav-link">Travails of a youth </a>
                                                              <a href="#A_new_dawn" class="nav-link">A new dawn</a >
                                                                              <a href="#Battle_of_kings" class="nav-link">Battle of kings</a >
                                                                                              <a href="#Fall_of_an_emperor" class="nav-link ">Fall of an emperor</a >
                                                                                              


      </nav>
</body>
</html>
/* file: styles.css */
*{box-sizing:border-box;}

body
{height :100vh;
margin:0;
overflow :hidden ;
}

@media(max-width:600px){body{height:100%;}}
}

p
{font-size:1.2rem;
font-weight:400;}

@media(min-width:500px)
{
p
{font-size:2rem;}
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 9; A3_Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Mobile Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

1 Like

You have an extra }

Alright let me check it out

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