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.

[sanpedro]

The margins aren’t the majority of my screen now, thanks! I’m in agreement with @timmyreal. Margin customization should be a higher-priority addition. The two extreme choices for margins right now aren’t ideal. This snippet helps your page look more like Microsoft Word, if desired. The ability to adjust margins within Editor would be a very welcome update.

[GLight]

In my case, it works.
Have a try. The snippet can be turned on/off independently.

[MinusGix]

Sadly, that CSS snippet does not appear to work for me on v0.13.23, at least in editor mode with live preview. There is no longer a .CodeMirror class. Trying to apply it to the .cm-editor class instead (I’m unsure if those are analogous) didn’t work correctly.

[GLight]

I’m sorry that I forgot the mark the solution for this issue. This issue had been solved a couple of months ago.

You may find the working css snippet in post #5.

[MinusGix]

Oh! Thanks! I had completely skipped past that one and went for the CSS snippet posted by another user more recently. Your version works great, thanks.