Is it possible to restrict the width of an admonition?

[MaximilianKohler]

Here's what ChatGPT gave me:

Yes, you can target only a specific admonition or a specific page by adding custom classes or using page-specific selectors in the CSS. Here’s how you can achieve this:

1. Target a specific admonition using a custom class:

You can add a custom class to a specific admonition in your Markdown file. MkDocs Material allows you to specify a custom class for admonitions using the class attribute.

For example, you can add a class like custom-width to a specific admonition:

!!! note "Custom Admonition"
    This is a custom admonition with limited width.

    :class: custom-width

Now, in your custom.css, you can target this specific admonition by its custom class:

/* Limit the width of admonitions with class 'custom-width' */
.custom-width {
    max-width: 600px;
    margin: 0 auto; /* Center the admonition */
}

This will only apply the width limit to the admonition that has the custom-width class.

2. Target admonitions on a specific page:

If you want to limit the width of an admonition on only one page, you can target it using the page ID in the body’s class attribute. Each page in MkDocs has a unique class in the body tag, which includes the page’s filename.

For example, if your page is called my_page.md, you can target admonitions on that page specifically.

• First, in your my_page.md, add a custom class to your admonition:

  !!! note "Custom Admonition"
      This is a custom admonition with limited width.
  
      :class: my-page-admonition

• Then, in your custom.css, you can target the admonition on this page specifically:

  /* Limit the width of admonitions on the 'my_page' */
  body.page-my-page .my-page-admonition {
      max-width: 600px;
      margin: 0 auto;
  }

This will ensure the style is applied only on the my_page.md.

3. Target a specific admonition on one page without custom classes:

If you don’t want to manually add a custom class to each admonition, you can use the page-specific class and the general admonition class selector.

/* Limit width of all admonitions on a specific page */
body.page-my-page .admonition {
    max-width: 600px;
    margin: 0 auto;
}

This will apply to all admonitions on that specific page (my_page.md) without needing to add custom classes to each admonition.

Summary:

• Specific admonition: Add a custom class (:class:) to the admonition and target it in your CSS.
• One page only: Use the page-specific class (e.g., body.page-my-page) to target admonitions only on that page.

These methods allow you to fine-tune the styles without affecting other pages or admonitions across the whole site.

I tried the first one, but that didn't work:

[kamilkrzyskow]

Hello @MaximilianKohler,
the answer provided by ChatGPT with the :class: is a hallucination probably based on the Sphnix docs, however the admonitions in MkDocs are generated using the extension from Python Markdown:

• https://python-markdown.github.io/extensions/admonition/

From the docs it says:

You can also provide additional CSS class names separated by spaces. The first class should be the “type.” For example:

!!! danger highlight blink "Don't try this at home"
...

So in your case it wold be !!! note custom-width "Custom Admonition"
The CSS looks fine.

[kamilkrzyskow]

There are also inline blocks, which fit into the flow of text, perhaps this was your intent:

• https://squidfunk.github.io/mkdocs-material/reference/admonitions/#inline-blocks

[MaximilianKohler]

Thank you, but no, I tried that here and I didn't like it: #4964 (comment)

Your first solution is exactly what I was looking for: #7886