Independent text and code/table width

[andrewfullard]

Hello

We have code examples and tables in our documentation that should ideally be displayed at full width if possible, while we would like text paragraphs to remain within a sensible range e.g. less than ~75 characters.

We have tried this in extra.css

p {
  max-width: 61rem;
}
li {
max-width: 61rem;
}

But this misses many edge cases e.g.

The text in the warning box is a

so it gets wrapped but the container isn't set. this has a specific type so it could be overridden either way. Code blocks nested within a bulleted list get overwritten (see the ssh example at the bottom) but not ones that have a line break so they're outside of the list (the example at top). 

[squidfunk]

Never seen that request before 😀 You would need to stretch the entirety of the container to the full width and then you could probably limit all non-code blocks by using a :not CSS selector, something like (untested):

.md-content__inner > :not(.highlight) {
  max-width: 61rem;
}

The selector above makes use of a child selector (>) to scope stretching to the direct descendants of .md-typeset. This is not the full story, but I don't know what CSS or modifications you used, so feel free to share a full solution for future users.