Adjusting position of md-clipboard md-icon (code block copy to clipboard button)

[rmscode]

I wanted my mkdocs site to be full width, so I added this to extra.css:

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

As a result, code blocks, among other things, are also full width. I would much rather have codeblocks, admonitions, etc. keep their default widths.

Anyway, I found the .md-code__content class and made my desired adjustments but I don't know how to get the copy button (.md-clipboard?) back "inside" the code block.

[A3Bagged]

@rmscode

Anyway, I found the .md-code__content class and made my desired adjustments but I don't know how to get the copy button (.md-clipboard?) back "inside" the code block.

Could you check with inspector/DevTools what position the codeblock has? If none is applied the icon (with most likely position: absolute; applied) will go to the nearest parent with position: relative; or position: aboslute; If the .md-code__content doesn't have position applied it goes outside of this element. To counter this and keep the icon within the codeblock you could add the following:

.md-code__content {
    position: relative;
}

See if that works :) I also recommend taking a look at the css position property

[kamilkrzyskow]

Hello @rmscode,
the .md-code__content doesn't include the buttons. At least looking at the example here:

.md-grid {
  max-width: initial;
}
.md-code__content {
  max-width: 50%;
}

• https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/
  

There is a pre element which wraps the output and there is also the div wrapper with the .highlight class.
So instead of targetting .md-code__content target the highlight class.

.highlight {
  max-width: 50%;
}