How to make a single note set full width or 1000px

Custom CSS & Theme Design
1

I’m using the minimal theme and I set a default width of 550px, but for some informative notes I need a larger width. So is there any way to set the width of some specific notes?

1 Like
2

You can add css classes around specific notes by putting a cssclass field in the frontmatter.

For example on my overview pages I use

---
cssclass: fullwidth
---

and then in my css I have something like

.fullwidth.markdown-source-view .(more stuff here I think) {
  .....
}

Can’t check the exact css atm, but you get the gist

3

Thank you for your reply, I still don’t know how to operate if I have no basis for the code

4

(1) Apply a custom css class to your note for single note formatting

when u apply cssclass: customname at the frontmatter (aka yaml), the css class named customname will be applied to top level div of that particular note (allowing you to apply the said formatting only for the notes (aka markdown file) with that css class.

as per convention (which obsidian follow), yaml must be put at the very top.

---
cssclass: customname
---

(here you put the rest of your note)

(2) Save a custom CSS code to modify the note’s width

minimal guide doesn’t seem to have specific control for note-wide width (it has block-wide width control for table). so here’s what i use to control the width of a note. I’m too lazy to figure out why it need so many classes (i’m sure i don’t need it, but the more specificity the css has, it will be prioritised

/* for editing view */
.customname.markdown-source-view.mod-cm6.is-readable-line-width:not(.is-rtl) .cm-contentContainer,
.customname.markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-content,
.customname.markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-line:not(.HyperMD-table-row) {
    max-width: 1000px;
}

/* for reading view */
.customname.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
    max-width: 1000px;
}

to understand how to load css snippet, you may refer to minimal’s guide on the matter. CSS snippets - Minimal Documentation. But in essence u save the above css code in a text file, and save it as anything.css into this particular folder [yourvault]/.obsidian/snippets and follow the guide on how to enable it.

3 Likes
5

Thank you very much! You’re the best!

6

Sorry, I still have a question, it doesn’t take effect in preview mode, is there any way to solve it?

7

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.