Changing column widths to 25% 50% 25%

[biofsphere]

I use mkdocs-material with a lot of Portuguese text. This language has too many long words and topics title eventually have to use two lines. I am trying to avoid that, for a better visual, by changing column widths. However, I am not a CSS expert. No matter the minor adjustments I do in .md-content, .md-sidebar--primary and .md-sidebar--secondary, I don't seem to get it right. At some point I did get the columns right, but the padding was wrong. Does anyone have tried that before? If so, did you succeed? How? Thank you for any kind of directions.

[niclasheinz]

Hi @biofsphere

You can also change the font-size of the headlines, by adding a costum stylesheet to your project like this:

h1 {
  font-size: 1em !important;
}

Documentation how to implement can you find here

Note

The usage of !important here is required because the h1 tag on its own doesn't have enough Specificity
To fix that use the .md-typeset h1 selector and !important won't be needed

[kamilkrzyskow]

As for the "column" width, typically only the width of the grid container is modified, together with the footer / header @biofsphere

.md-grid {
  max-width: /* some value*/;
}

You can also target the content column / footer / header separately for more fine-grained control.
If you really need to change the width of the columns then target the class selectors you mentioned, but use rem or em size measures instead of % together with some media queries also limited by rem / em values.

Ref

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css
• Adjusting position of md-clipboard md-icon (code block copy to clipboard button) #7806 (comment)
• Allow content width to grow without limiting it. #6404 (comment)

I also think you can set a shorter name with title for the left navigation and keep the H1 as expressive as you need:

• https://squidfunk.github.io/mkdocs-material/reference/#setting-the-page-title