Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

My media statement isn’t registering. I have tried various media statements, my media statement is at the end and I still cannot figure out the issue. (Don’t worry about my html content so far I’m gonna fill it in after css.)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Technical Documentation Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main id="main-doc">
      <nav id="navbar">
        <header>Contents</header>
        <a class="nav-link" href="#Part_1">Part 1</a>
        <a class="nav-link" href="#Part_2">Part 2</a>
        <a class="nav-link" href="#Part_3">Part 3</a>
        <a class="nav-link" href="#Part_4">Part 4</a>
        <a class="nav-link" href="#Part_5">Part 5</a>
      </nav>
      <section class="main-section" id="Part_1"><header>Part 1</header>
      <p>Part 1 bladibla<li></li></p>
      <p>Part 1.2 bladibla<code></code></p></section>
      <section class="main-section" id="Part_2"><header>Part 2</header><p>Part 2 bladibla <li></li></p>
      <p>Part 2.2 bladibla<code></code></p></section>
      <section class="main-section" id="Part_3"><header>Part 3</header><p>Part 3 bladibla <li></li></p>
      <p>Part 5.2 bladibla<code></code></p></section>
      <section class="main-section" id="Part_4"><header>Part 4</header><p>Part 4 bladibla <li></li></p>
      <p>Part 4.2 bladibla<code></code></p></section>
      <section class="main-section" id="Part_5"><header>Part 5</header><p>Part 5 bladibla <li></li></p>
      <p>Part 5.2 bladibla<code></code></p></section>
	   </main> 
  </body>
</html>

/* file: styles.css */
#navbar {
  display: flex;
  justify-content: left;
}

@media(max-width: 480px) {
  body {background-color: blue;}
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page`Preformatted text`

2

It’s styles.css (notice the s after the e).

3

smh. Thank you so much I think this solves it.

4

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