Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Hello i don’t understand why my @media queries dont work pls help me

Your code so far

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="coucou">
      <header>
        <h1>coucou</h1>
      </header>
      <p>azkejlqslkdqskljd</p>
      <p>azkejlqslkdqskljd</p>
      <code>p</code>
    </section>
    <section class="main-section" id="salut">
      <header>
        <h1>salut</h1>
      </header>
      <p>azkejlqslkdqskljd</p>
      <p>azkejlqslkdqskljd</p>
      <code>p</code>
    </section>
    <section class="main-section" id="fdp">
      <header>
        <h1>fdp</h1>
      </header>
      <p>azkejlqslkdqskljd</p>
      <p>azkejlqslkdqskljd</p>
      <code>p</code>
    </section>
    <section class="main-section" id="salope">
      <header>
        <h1>salope</h1>
      </header>
      <p>azkejlqslkdqskljd</p>
      <p>azkejlqslkdqskljd</p>
      <code>p</code>
    </section>
    <section class="main-section" id="petasse">
      <header>
        <h1 id="e">petasse</h1>
      </header>
      <p>azkejlqslkdqskljd</p>
      <p>azkejlqslkdqskljd</p>
      <code>p</code>
      <ul>
        <li>zaezae</li>
        <li>azeaze</li>
        <li>qsdqsd</li>
        <li>sdfsdf</li>
        <li>sdfsdf</li>
      </ul>
    </section>
    <nav id="navbar">
      <header>
        <h1>heyoooo</h1>
      </header>
      <a class="nav-link" href="#coucou">coucou</a>
      <a class="nav-link" href="#salut">salut</a>
      <a class="nav-link" href="#fdp">fdp</a>
      <a class="nav-link" href="#salope">salope</a>
      <a class="nav-link" href="#petasse">petasse</a>
    </nav>
  </main>
</body>
</html>


/* file: styles.css */
#navbar {
  position: relative;
  left: 0;
}

@media (max-width: 1199px) and (min-width: 769px) {
  
  body {
    
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

3

Did you solve your issue?

4

no, can you help me ? i just need to put the @media queries but i don’t understand it dont work

5

I validated all except this

6

Just a suggestion:
Try using the following example on how it should appear and be set up.

@media screen and (min-width: 480px) and (max-width 2600px){
body {
background-color: orange;
}
}

7

" Your Technical Documentation project should use at least one media query. " this the only instruction, not width recommended or nothing, and my english is bad so it’s hard for me :frowning:

8

up, i want finish this before tonight pleeeeease

9

ok fixed for me, i just forgot to add, <link rel=“stylesheet” href=“styles.css”

1 Like
11

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