Resize in navigation bar problem

HTML-CSS
1

Tell us what’s happening:

I tried to include a resize for the navigation bar when the screen is bigger than 800px. However the problem is when you resize the bar (make it bigger) and try to resize the screen to less than 800 pixels, the navigation bar glitches and it doesn’t fill 100% of the width like it is supposed to. what is the problem?

Your code so far

*{
  margin: 0;
  padding: 0;
}
html{
  scroll-behavior: smooth;
}
body{
  background-color: white;
  display: flex;
  flex-direction: column;
  font-family: arial;
  
}

#main-doc{
  margin: 20px;
  
}
header{
  font-size: 30px;
  padding: 10 0;
}
p{
  margin: 10 0 10 15;
}

section li{
  margin: 10 0 10 40;
}
#navbar{
  background-color: white;
  width: 100%;
  border-bottom: 1px solid;
  
}
#navbar header{
  margin-left: 10px;

}
#navbar li{
  border-top: 1px solid;
  padding: 10px;
  
  list-style: none;
}

#navbar a{
  text-decoration: none;
  display: block;
  cursor: pointer;
  font-size: 18px;
  transition: text-indent 0.2s ease-in-out;
  color: black;
}

#navbar a:hover{
  font-weight: 500;
  text-indent: 7px;
  
}

code{
  display: block;
  background-color: black;
  color: gray;
  border-radius: 5px;
  padding: 15px;
  margin:10px;
  font-size: 16px;
  text-align:left;
  white-space: pre-line;
  word-break: normal;
  word-wrap: normal;
}

section:last-of-type{
  padding-bottom: 10px;
}

@media only screen and (min-width: 800px){
  body{
    flex-direction: row;
  }
  #navbar{
    width: 300px;
    height: 100%;
    position: fixed;
    border-right: 1px solid;
    resize: horizontal;
    overflow-x:scroll;
  }
  #main-doc{
    margin-left: 350px;

  }
   
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi.
Can you provide your HTML code as well?

1 Like
3

Hello, Here is the html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale= 1.0"/>
        <meta name="description" content="Python Documentation"/>
        <title>Python Documentation Page</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <nav id="navbar">
            <header>Python Documentation</header>
            <ul>
                <li>
                    <a class="nav-link" href="#Introduction">Introduction</a>
                </li>
                <li>
                    <a class="nav-link" href="#Hello,_world!">Hello, World!</a>
                </li>
                <li>
                    <a class="nav-link" href="#History">History</a>
                </li>
                <li>
                    <a class="nav-link" href="#Basic_Data_Types">Basic Data Types</a>
                </li>
                <li>
                    <a class="nav-link" href="#References">References</a>
                </li>
            </ul>
        </nav>
        <main id="main-doc">
            <section id="Introduction" class="main-section">
                <header>Introduction</header>
                <p>Python is an easy to learn, powerful programming language. It has efficient high-level data structures and a simple but effective approach to object-oriented programming. Python’s elegant syntax and dynamic typing, together with its interpreted nature, make it an ideal language for scripting and rapid application development in many areas on most platforms.</p>
                
            </section>
            <section id="Hello,_world!" class="main-section">
                <header>Hello, world!</header>
                <p>There is a long-standing custom in the field of computer programming that the first code written in a newly installed language is a short program that simply displays the string Hello, World! to the console.The simplest Python 3 code to display Hello, World! is:</p>
                <pre>
                <code>#This is how you can print hello world in Python 3
                    print("Hello, World!")</code></pre>
            </section>
            <section id="History" class="main-section">
                <header>History</header>
                <p>TPython is a high-level programming language created by Guido van Rossum in the late 1980s and first released in 1991. It prioritizes readability and simplicity in its syntax. Since then, it has evolved through major releases, including Python 2.x and Python 3.x series. Python's versatility and strong community support have made it immensely popular across various domains, from web development to data science. Its ongoing development is overseen by the Python Software Foundation (PSF).</p>
            <section id="Basic_Data_Types" class="main-section">
                <header>Basic Data Types</header>
                <p>There are different types of data types in Python. Some built-in Python data types are:</p>
                <ul>
                    <li><strong>Numeric data types</strong></a>: <em>int, float, complex</em></li>
                    <li><strong>String data types</strong></a>: <em>str</em></li>
                    <li><strong>Sequence types</strong></a>: <em>list, tuple, range</em></li>
                    <li><strong>Binary types</strong>: <em>bytes, bytearray, memoryview</em></li>
                    <li><strong>Mapping data type</strong>: <em>dict</em></li>
                    <li><strong>Boolean type</strong>: <em>bool</em></li>
                    <li><strong>Set data types</strong>: <em>set, frozenset</em></li>
                </ul>
            </section>
            <section id="References" class="main-section">
                <header>References</header>
                <p>All the documentation in this page is taken from <a href="https://realpython.com/" target="_blank">Real Python</a> and <a href="https://www.digitalocean.com/" target="_blank">DigitalOcean</a></p>
            </section>
        </main>
    </body>
</html>
4

Welcome to the forum @xozier

Your css file does not have an @media rule for when the viewport is less than 800px.

Happy coding

5

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