How to adjust the max-width of an admonition?

[jeremy-feng]

When I hide the navigation and TOC, the content width is very large, especially on a large screen.

I want to set the max-width of an admonition, and make it center-aligned. How can I do so?

[squidfunk]

You can adjust Material for MkDocs to your needs with additional CSS:

.md-typeset .admonition {
  max-width: 500px; /* <-- adjust to fit */
  margin-inline: auto;
}

[jeremy-feng]

Thanks!

What if I just want this specific admonition to have a limited width? I don't want other admonitions to change their behavior.

[squidfunk]

You can scope the styles to an additional class, e.g. narrow:

.md-typeset .admonition.narrow {
  max-width: 500px;
  margin-inline: auto;
}

Then use it as follows:

!!! note narrow "Phasellus posuere in sem ut cursus"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

[jeremy-feng]

Perfect! That's exactly what I am looking for.

Thank you so much! You are always so helpful.

[squidfunk]

Thanks for your continued support as a sponsor of the project!