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

[GLight]

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).

[rupert]

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…

[GLight]

Oh, thanks!

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

[GLight]

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 ?

[GLight]

Oh, I find a solution at:

A fix for ugly long lines in fullscreen v2

Edit: rsdimitrov pointed out you can’t just use .view-content but have to specify markdown-source-view & markdown-preview-view. Get THIS when in full screen? [1] Hate it? Want THIS instead? [2] Then add THIS to your obsidian.css file: .markdown-source-view, .markdown-preview-view { max-width: 700px; margin: auto; } Edit: rsdimitrov pointed out you can’t just use .view-content but have to specify markdown-source-view & markdown-preview-view.

the code looks like the following:

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

[GreenChocho]

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:

A fix for ugly long lines in fullscreen v2

While selecting the whole page there was a glitch, added ‘selected’ div as well. .CodeMirror-lines, .CodeMirror-selected, .markdown-preview-section { max-width: 700px; margin: auto; }

[sanket.sonavane]

Thanks , this is exactly what i was looking for

[sanket.sonavane]

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

[hahattpro]

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.

[hahattpro]

I see, because ‘minimal’ theme ( https://github.com/kepano/obsidian-minimal) is broken, does not support turn off “Readable line length”. Other theme, or None, it work.

[zhongdongy]

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:

.markdown-source-view.is-readable-line-width .CodeMirror,
.markdown-preview-view.is-readable-line-width .CodeMirror,
.markdown-source-view.is-readable-line-width .markdown-preview-sizer,
.markdown-preview-view.is-readable-line-width .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.

[tctco]

Does this code snippet work on editing mode?

[timmyreal]

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.