Kevin Powell - Community•3w ago

I need help centering my table of content

I have no idea why my table of content won't center for the media query that I set up. I have tried display: flex; justify-content: center; align-items: center; I also tried margin-right: auto; marigin-left: auto; I put up a border around my class "dropdown" class to see if it spanned across the entire screen horizontally and it did. So it confuses me why margin auto or flexbox is not working for me? Any help would be appreciated. https://blogbydave.netlify.app/blog/2024-10-30-virtualization/ https://github.com/DaveSamuels1998/Dave-Samuels-Blog

 .button-link {
    background: none;
    border: none;
    text-decoration: none;
    color: var(--clr-neutral-400);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-align: center;
  }
  
  
  .dropdown {
    position: relative;
  }
  
  
  .dropdown-menu {
    background-color: var(--clr-neutral-100);
    padding: 0.75rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.1);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out;
  }
  
  
  .dropdown.active > .dropdown-menu {
    opacity: 1;
    max-height: 500px; 
  }

  @media (max-width: 48rem) {
    .main-article {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 1fr;
 
    }
  }


  @media (max-width: 48rem) {
    
    .dropdown {
      position: relative;
      display: flex; 
      justify-content: center;
      align-items: center; 
    }
  }

 .button-link {
    background: none;
    border: none;
    text-decoration: none;
    color: var(--clr-neutral-400);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-align: center;
  }
  
  
  .dropdown {
    position: relative;
  }
  
  
  .dropdown-menu {
    background-color: var(--clr-neutral-100);
    padding: 0.75rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.1);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out;
  }
  
  
  .dropdown.active > .dropdown-menu {
    opacity: 1;
    max-height: 500px; 
  }

  @media (max-width: 48rem) {
    .main-article {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 1fr;
 
    }
  }


  @media (max-width: 48rem) {
    
    .dropdown {
      position: relative;
      display: flex; 
      justify-content: center;
      align-items: center; 
    }
  }

GitHub

GitHub - DaveSamuels1998/Dave-Samuels-Blog

Contribute to DaveSamuels1998/Dave-Samuels-Blog development by creating an account on GitHub.

5 Replies

clevermissfox•3w ago

it looks centered in the space to me? although you probably want to add a flex-direction : column

Takyon_is_OnlineOP•3w ago

I want the button to be only centered horizontally. Then have the dropdown push content downward with its margin. I am not sure if what is inside the button is causing it to act like this.

clevermissfox•3w ago

So you have an aria-expanded but no Aria-controls or controlledby. What is inside the button is only the words "Table of Contents". It has no children other than that node. The parent .dropdown has two direct children .btn-link and .dropdown-menu Since .dropdown has a display of flex, it's putting its two direct children side by side. Try flex-direction and see if that's what you're looking for.

Takyon_is_OnlineOP•3w ago

Flex-direction makes the content get pushed down regardless if I click the button or not. The table of content is centered but I also want it to take up its respective space. I want the button to not take up space when the Table of Content is closed and push the content down when it is open. I am using this site as a reference. I want my Table of Contents to behave like this one in mobile view https://moderncss.dev/providing-type-definitions-for-css-with-at-property/

Modern CSS Solutions

Providing Type Definitions for CSS with @property | Modern CSS Solu...

Write safer CSS using @property, which enables defining types for custom properties. Learn why traditional fallback values can fail, and how @property features improve the resilience of custom property definitions.

clevermissfox•2w ago

this one isnt centered on mobile view fyi. Looks like you did a whole refactor. if youre going to use a details/summary, you no longer need to use the button, its already an interactive element. And then is confusing with two focus jumps, one to the summary, and then another to the button inside which no longer needs to trigger anything

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li> Introduction </li> 
<!-- ... etc -->
  </ol>
</details>

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li> Introduction </li> 
<!-- ... etc -->
  </ol>
</details>

Which means you can completely get rid of your Javascript file that's using the button to toggle a .dropdown element since you're using the semantic details/summary instead , and don't forget to also remove the button element and just leave the text node Table of Contents

Gaming

Programming

I need help centering my table of content

Did you find this page helpful?