How to get a lager page width in both editing mode and preview mode?

Currently, the page looks like the following:

I hope the page width is larger, i.e. a page is wider and a line contains more words.

I tried to modify the css like the following:

.CodeMirror pre.CodeMirror-line {
  font-size: 16px;
  font-family: PingFang, Fira Code, Source Code Pro, monospace;
  max-width: 1000px;

However, the last line does not take effect. The width of the page within the editing window is always not exceeding 700px. In other words, while example shown above doest not work, if i set the max-width to 100px, the page width will become 100px.

I want to know what can I do to get a wider page width? (I prefer to not change the font-size, by the way).


In the Editor Settings pane, if you uncheck “Readable line length” then the lines take up all the available width in the pane.

…only just found this myself…


Oh, thanks!

Actually, I tried that button. But I did not try the combo.

It works! I should ask on the forum first… you saved me from a sleepless night!
Thank you again!

BTW, I found a drawback of this tweak: the content is no-longer at the horizontal center of the screen. It now nests at the left side of the window.

Do you know the css code that make the page be at the horizontal center of the window ?

Oh, I find a solution at:

the code looks like the following:

.markdown-source-view, .markdown-preview-view {
max-width: 900px;
margin: auto;
1 Like

Thanks for the guide.
I tried applying the code, the scrollbar placement is a bit annoying though.
In the same thread, there are another version of the code which keep the scrollbar at the default place:

1 Like

Thanks , this is exactly what i was looking for

Thanks this also works great. if you wanted tight control over your width.

Not work for me. I turn off “Readable line length” but the text don’t change, just group at the center. It does not expand to full width. Nothing change.

I see, because ‘minimal’ theme ( is broken, does not support turn off “Readable line length”. Other theme, or None, it work.

1 Like

I have updated the code snippet for customizing view width in both editor and preview mode. And this only applies when you have switched on “Readable Line Width” option: .CodeMirror, .CodeMirror, .markdown-preview-sizer, .markdown-preview-sizer {
  max-width: 1000px;
  margin: auto;

I personally set to max content width of 1000px because this works very nice on my monitor. People can change this value for your preference of course.

Does this code snippet work on editing mode?

1 Like

I’m also interested in applying this in editor mode. It’s kind of obnoxious to have a decently sized monitor and only use a two-inch column in the middle. Deselecting “Readable Line Length” just sets it to the opposite extreme. Honestly, I’m surprised that custom width isn’t just a basic part of the Obsidian.