Full width option?

[thim81]

Is there a setting that renders the pages to use the full width.

Currently the content of a page is built like using a center mode where the division is: white space - left sidebar - content - right sidebar - white space

Is there a setting or mode where you can toggle the behaviour or ratio to go more for a full width mode?
left sidebar - content (stretched) - right sidebar

[jromal]

I am not an expert.

But I know it has been discussed and explained before. Recently I reduced the space for the TOC by increasing the space for the center.
I use now "100%" of the space available. This is good enough for all my colleagues. The TOC is small and the content is bigger. This is what I used for it. It was posted by Martin with a 70% as example.

/* Maximum space for text block */
.md-grid {
  max-width: 100%; /* or 100%, if you want to stretch to full-width */
}

Furthermore there is an automatic calculation that when the space available is below a certain level it puts the navigation bar on a burger menu and does not show the TOC. You can test it without changing the screen resolution just using "CTRL + +" to increase the zoom. At certain point the navigation bar moves up and at a later one the TOC disappears.

If you change the variable for the "minimum" width to a very high value it will work like in a mobile phone. I remember to have read it also somewhere. Try with the search.

[bi-an]

Excuse me, in which configuration file should I add the ".md-grid" option? It doesn’t look like yaml syntax, nor json syntax. If I add it to mkdocs.yml I get a syntax error.

[bi-an]

I find it in docs/stylesheets/extra.css, see more here.

[ben519]

I'd like to point out an edge case I noticed recently. When your page has a single level-1 header and no other headers, like

# This is my title
And this is some content

blah blah blah

The space for the table of contents (i.e. the right sidebar) is allotted for the table of contents, even though no table of contents appears.

Here's an example.

[negin513]

Okay, this might be too late by I have found an answer to @ben519 's question:

If you hide the toc on this page, it will extend to full length covering empty the toc column.
Just add the following to top of your page:

---
hide:
  - toc
---
# This is my title
And this is some content

blah blah blah

[bi-an]

您好，收到了~感谢您的来信，祝您生活愉快！

[lucastho]

My quick and dirty fix was an extra_javascript in mkdocs.yml

window.addEventListener("load", function() {
console.log('Customization for improved readability: setting style max-width to 999rem in .md-grid class');
var sheet = document.styleSheets[0];
sheet.insertRule(".md-grid { max-width:999rem; }", sheet.cssRules.length);
});

[bi-an]

您好，收到了~感谢您的来信，祝您生活愉快！

[scordio]

According to https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#content-area-width, this can be done with:

.md-grid {
  max-width: initial;
}