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.