How to change width of content area in mdbook

Question

Does anybody know how to force mdbook to use the whole content area? Currently there is a large margin left and right and the whole content (especially tables) are heavily compressed.

Answer 1

See https://github.com/rust-lang/mdBook/issues/1847

Full quote from the link:

There isn't a specific setting for the width. Something like this should work:

:root {
    --content-max-width: 500px;
}

There are several css files and such that you can override. https://rust-lang.github.io/mdBook/format/theme/index.html discusses the files, and mdbook init --theme will give you a copy of the defaults.

Answer 2

The answer of sarema points exact to the correct solution, but there is still one detail which is important. So, for everyone else who is interested in this problem, here the full solution:

In the main book.toml file you can specify a custom .css file:

[output.html]
additional-css = ["custom.css"]

In this custom.css file you can override all available css classes as sarema already has posted:

:root {
  --content-max-width: 500px;
}

When you take a look to the page source within your web browser, you can examine all the available css classes. https://rust-lang.github.io/mdBook/format/theme/index.html gives an overview about the main .css files, but in order to get the details there is no other solution than to examine this files by hand. So in my case I have additionally changed some margins of .css classes I found in the page sources like this:

:root {
  --content-max-width: 80%;
}

.chapter li.part-title {
  color: var(--sidebar-fg);
  margin-bottom: -5px;
  margin-top: 11px;
  font-weight: bold;
}

.chapter li.chapter-item {
  line-height: 1.5em;
  margin-left: 0.5em;
  margin-top: 0.6em;
}

Hope, this description is helpful for some others who despair of the styling of their mdbook ;)