I'm having trouble trying to add a full-width CSS class to certain notes using the Minimal theme

[afghankitty]

What I’m trying to do

I’m trying to use a snippet to apply a certain CSS class to notes and make them full-width. It works in the default theme, but in the Minimal theme, I’m stuck because it doesn’t work.

the snippet:

/* Optional Full-Width Notes */

.CodeMirror-lines, .CodeMirror-selected,  .markdown-preview-section {
  max-width: 700px;
  margin: auto;
}

.full-width .markdown-preview-section {
  max-width: 100% !important;
}

Using Minimal theme:

Using Default theme:

[ariehen]

Minimal has two classes for note width built in, no CSS needed. wide and max. Give max a try.

If you did want a width that is different than wide or max, you could use:

.wideish {
    --line-width: 1200px;
}

[afghankitty]

Hello, thanks for responding. Your code works, but not entirely. The dataviews still didn’t display correctly, but I managed to fix it with what you mentioned.

.wideish {
    --line-width: 1200px;
}

---

.wideish {
  --line-width: 1200px;
}

.wideish .markdown-preview-view .dataview,
.wideish .markdown-preview-view .dataview table {
  max-width: 1200px !important;
  width: 100% !important;
}

.wideish .markdown-preview-view .dataview .table-container {
  max-width: 1200px !important;
  width: 100% !important;
}