Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening: Problem with the Query media.

I am currently working on my technical documentation page, and I am stuck at the last requirement which is the need for at least one media requirement. I have tried everything possible to get it done by adding some media query in the CSS sheet, but it is still not working out, please is point me to the right direction. Thank you.

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">
    <title>Technical document page</title>
    <link rel="stylesheet" href="styles1.css">
</head>
<body>
    <nav id="navbar">
        <header>Python Documentation</header>
        <ul>
            <li><a href="#introduction" class="nav-link">Introduction</a></li>
            <li><a href="#what_you_should_already_know" class="nav-link">What you should already know</a></li>
            <li><a href="#hello_world" class="nav-link">Hello World</a></li>
            <li><a href="#variables" class="nav-link"> Variables</a></li>
            <li><a href="#declaring_variables" class="nav-link">Declaring variables</a></li>
            <li id="lastlink"><a href="#data_types" class="nav-link">Data Types</a></li>
        </ul>
    </nav>
  

    
    <main id="main-doc"> 
        <section class="main-section" id="introduction">
            <header>Introduction</header>
            <article>
                <p>Python is a high-level, interpreted programming language known for its easy-to-read syntax and versatility.
                   Created by Guido van Rossum and first released in 1991</p>
                <p>
                    Python has become one of the most popular programming languages in the world. It’s used for a wide range of
                     applications, from web development to scientific computing. Here are some important use cases of python programming
                     language:
                </p>
                <ul>
                    <li>Web Development: Python can be used to build server-side web applications. Frameworks like Django and 
                        Flask have made it easier to create complex, data-driven websites.
                    </li>
                    <li>
                        Data Analysis and Machine Learning: Python is a staple in data science for analyzing and visualizing data.
                         Libraries such as Pandas, NumPy, and Scikit-learn are widely used for machine learning and data processing tasks.
                    </li>    
                    <li>
                        Automation and Scripting: Python excels at automating repetitive tasks and scripting.
                        Its simplicity allows for quick development of scripts that can automate complex processes in various domains,
                        from system administration to finance.
                    </li>
                </ul>
            </article>
        </section>

        <section class="main-section" id="what_you_should_already_know">
            <header>What You Should Already Know</header>
            <article>
                <p>
                    This Guide assumes you possess the following basic background: 
                </p>
                <ul>
                    <li>
                        Basic Computer Literacy: Understanding how to navigate your computer’s operating system, install software,
                        and manage files is essential.
                    </li>
                    <li>
                        Fundamental Programming Concepts: While not mandatory, familiarity with basic programming concepts like 
                        variables, loops, and conditional statements can be helpful.
                    </li>
                    <li>
                        Problem-Solving Skills: The ability to think logically and solve problems is crucial in programming. 
                        Python often serves as an introductory language because it allows new programmers to focus on these skills
                        without getting bogged down by complex syntax.
                    </li>
                </ul>
            </article>
        </section>

        <section class="main-section" id="hello_world">
            <header>Hello World</header>
            <article>
                <p>
                The “Hello, World!” program is often the first example in programming documentation as it is a simple way to 
                introduce the basic syntax of a language. Here’s how you can introduce it in your Python technical documentation:
                </p>
            </article>
            <code>
                print("Hello, World!")
            </code>
        </section>

        <section class="main-section" id="variables">
            <header>Variables</header>
            <article>
                <p>
                    Variables in Python are symbolic names that reference or point to values stored in the computer’s memory.
                    They are created by assigning a value to a name with the equals sign =. For example, x = 5 creates a
                    variable named x with the value of 5.
                </p>
                <p>
                    Python is dynamically typed, which means you don’t have to declare the type of a variable when you create one.
                    The interpreter infers the type based on the assigned value. So, x = 5 makes x an integer,
                    while x = "Hello" would make x a string.
                </p>
                <p>
                    Variables are mutable in Python. This means that after you create a variable, you can change its value to 
                    something else, like x = 10, and x will now reference the new value. It’s also easy to assign multiple 
                    variables at once, like a, b, c = 1, 2, 3.
                </p>
            </article>
        </section>

        <section class="main-section" id="declaring_variables" >
            <header>Declaring Variables</header>
            <article>
                <p>
                    In Python, declaring a variable is as simple as assigning a value to a name. For instance:
                    <code>
                        name = "Alice"
                    </code>
                    This line of code declares a variable called name and assigns it the string value "Alice"
                    <code>
                        age= "20"
                    </code>
                    The same applies to this short code.
                </p>
                <p>
                    Python also allows for multiple assignments in a single line, enabling you to declare several variables at once:
                    <code>
                        a, b, c = 1, 2, 3
                    </code>
                    Here, a, b, and c are simultaneously declared with the values 1, 2, and 3, respectively.
                </p>
                <p>
                    For readability, you can also declare variables over multiple lines, especially when initializing a list or tuple:
                    <code>                       
                        coordinates = (
                                            10,
                                            20,
                                            30
                                        )
                    </code>
                    This code declares a tuple coordinates with three integer elements. Python’s flexibility with variable declaration 
                    makes it a user-friendly language for beginners and experts alike.
                </p>
            </article>
        </section>

        <section class="main-section" id="data_types">
            <header>Data Types</header>
            <article>
                <p>
                    In Python, data types are an essential concept as they define the kind of value that variables can store. 
                    Each data type in Python is actually a class and variables are instances of these classes. Here’s a list of the
                    primary data types available in Python:
                </p>
                <ul>
                    <li>Text Type</li>
                    <li>Numeric Type</li>
                    <li>Sequence Type</li>
                    <li>Mapping  Type</li>
                    <li>Set Type</li>
                    <li>Boolean Type</li>
                    <li>None Type</li>
                    <li>Binary Type</li>
                </ul>
                Understanding these data types is crucial as they determine what kind of operations you can perform on the values stored in variables.
            </article>
        </section>
    </main>
</body>
</html>

```css
/* file: styles.css */

```html,
body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}


### Your browser information:

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

### 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

you need to write styles.css here

1 Like

OMG, thank you so much for pointing that out to me.