Skip to main content

Adjust Alignment

Docusaurus uses full width of window, which makes it look too wide for me. I limited the width by making following changes.

Doc Sidebar Width​

src/css/custom.css
:root {
  --doc-sidebar-width: 250px !important;
  --doc-sidebar-hidden-width: 25px !important;
}

Add alignment.css​

src/styles/alignment.css
.navbar {
  @apply !px-0;
}

/* .navbar__inner,
.footer > div,
.docs-wrapper .main-wrapper,
.blog-post-page .main-wrapper,
.blog-authors-posts-page .main-wrapper,
.blog-tags-post-list-page .main-wrapper,
.blog-authors-list-page .main-wrapper,
.blog-list-page .main-wrapper {
  @apply px-0 mx-0 lg:px-16 lg:mx-auto md:bg-red-200 lg:bg-blue-200;
} */

/* .navbar__inner,
.footer > div,
.docs-wrapper .main-wrapper,
.blog-post-page .main-wrapper,
.blog-authors-posts-page .main-wrapper,
.blog-tags-post-list-page .main-wrapper,
.blog-authors-list-page .main-wrapper,
.blog-list-page .main-wrapper {
  @apply bg-red-200 sm:bg-pink-200 md:bg-yellow-200 lg:bg-blue-200;
} */

.navbar__inner,
.footer > div,
.docs-wrapper .main-wrapper,
.blog-post-page .main-wrapper,
.blog-authors-posts-page .main-wrapper,
.blog-tags-post-list-page .main-wrapper,
.blog-authors-list-page .main-wrapper,
.blog-list-page .main-wrapper {
  @apply px-4;
}

.container {
  @apply !max-w-full;
}

Add alignment.css to custom.css​

src/css/custom.css
@import "../styles/alignment.css";