Technical Documentation Page Media Query Not Shrinking Content With Sticky Sidebar

HTML-CSS
1

I think it might have to do with the position attribute I set to sticky for the navbar and therefore the reason the media query is not resizing the sidebar?

https://codepen.io/Mark-Matlock/pen/gOyyxLb

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  color: #4d4e53;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  display: flex;
}

#navbar {
  position: sticky;
  height: 100vh;
  top: 0;
  width: 350px;
}

header .logo {
  width: 350px;
  padding: 1rem 0 1rem 1.5rem;
  border: 1px solid #4d4e53;
  border-top: none;
}

header h2 {
  color: #fff;
}

.nav__links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.nav__links li {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  list-style: none;
  border: 1px solid #4d4e53;
}

.nav__links li:last-child {
  flex-grow: 1;
}

#main-doc {
  flex: 1;
  margin-left: 2.5rem;
  margin-right: 2rem;
  margin-bottom: 3rem;
}

#main-doc p {
  margin-left: 1rem;
}

#main-doc ul {
  margin-left: 4rem;
}

.main-heading {
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
  padding-top: 1rem;
  color: #fff;
}

pre code {
  background-color: #f7f7f7;
  display: block;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  line-height: 1.5rem;
  border-radius: 5px;
}

.nested-list li {
  padding: 0.5rem;
}

a[class="mdn-link"] {
  text-decoration: underline;
  color: #3391ff;
}

@media (max-width: 480px) {
  #navbar {
    width: 200px;
  }
}

index.html (some redacted to keep code brief)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>technical-documentation-page.freecodecamp.rocks</title>
  </head>
  <body>
    <div class="container">
      <nav id="navbar">
        <header>
          <div class="logo"><h2>JS Documentation</h2></div>
        </header>
        <ul class="nav__links">
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
          <li><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></li>
          <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
          <li><a class="nav-link" href="#Variables">Variables</a></li>
          <li><a class="nav-link" href="#Declaring_variables">Declaring variables</a></li>
          <li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
          <li><a class="nav-link" href="#Global_variables">Global variables</a></li>
          <li><a class="nav-link" href="#Constants">Constants</a></li>
          <li><a class="nav-link" href="#Data_types">Data types</a></li>
          <li><a class="nav-link" href="#if...else_statement">if...else statement</a></li>
          <li><a class="nav-link" href="#While_statement">while statement</a></li>
          <li><a class="nav-link" href="#Function_declarations">Function declarations</a></li>
          <li><a class="nav-link" href="#Reference">Reference</a></li>
        </ul>
      </nav>
      <main id="main-doc">
        <section class="main-section" id="Introduction">
          <header class="main-heading">Introduction</header>
          <article>
            <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
            <br />
            <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
            <br />
            <ul>
              <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
              <li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
            </ul>
          </article>

Browser information:

Chrome Version 124.0.6367.91 (Official Build) (arm64)
2

Hi,
Your media query works fine for me. It’s just that you’re resizing your navbar when the screen reaches 480px. If you try and change it to higher screen widths, it would look better.
Hope this helps.

3

Your sidebar is shrinking, just not the .logo inside the sidebar.
It’s because you set a fixed width for the .logo:

Try to use percentage to set the width for .logo so the .logo will shrink with the sidebar.

4

I changed the percentage to 75% but now my border doesn’t stretch to fit the rest of the navbar. The media query is also not shrinking the navbar how the solution is where the navbar changes to the middle of the screen on smaller devices.

.logo {
  width: 75%;
  padding: 1rem 0 1rem 1.5rem;
  border: 1px solid #4d4e53;
  border-top: none;
}

Screenshot 2024-04-29 at 10.52.40 AM
Screenshot 2024-04-29 at 10.52.40 AM1130×633 111 KB

5

This is with the page resized. The navbar list items are just shrinking on the left but not being placed into the middle of the viewport like how the solution has it.

Screenshot 2024-04-29 at 10.56.30 AM
Screenshot 2024-04-29 at 10.56.30 AM879×726 142 KB

6

Change it to 100%.

Your media query currently is:

@media (max-width: 600px) {
  #navbar {
    width: 200px;
  }
}

and it worked exactly like it supposed to: shrink the navbar.

What exactly do you mean by: “placed into the middle of the viewport like how the solution has it”?

Your HTML structure currently is:

<div class="container">
	<nav id="navbar"></nav>
	<main id="main-doc"></main>
</div>

Do you mean you want #navbar and #main-doc to be 100% width and stacked on each others vertically on small screen, like this?

media-query
media-query592×1159 57.3 KB

7

If you try and change it to higher screen widths, it would look better. Your media query works fine for me. It’s just that you’re resizing your navbar when the screen reaches.

8

Yeah I was trying to get it to stack vertically with a scrollbar.

9

In the media query:

  • Switch the container to a flex column direction.

  • Make the nav 100% wide and give it a fixed height.

  • Set the vertical overflow to be hidden and give the nav a background color.

  • Use scroll-padding to compensate for the nav height so the links jumps to the correct position on the page.

10

That works! Thank you so much. Any reason why we use scroll-padding? The links jump to the correct section without it.

@media (max-width: 750px) {
  .container {
    flex-direction: column;
  }
  #navbar {
    position: relative;
    height: 400px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding: auto;
    background-color: (24, 26, 27);
  }
  .logo {
    text-align: center;
  }
}
11

My bad, I forgot you used position sticky and not fixed. With fixed position you have to account for the missing out of flow content, which you do not have to do with position sticky. It was just a force of habit that I mentioned it.

12

Ah ok. Good to know.

13

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