A fix for ugly long lines in fullscreen v2

[Frederick_Lost]

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?

Hate it? Want THIS instead?

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.

[rsdimitrov]

@Frederick_Lost

.view-content {
max-width: 700px;
margin: auto;
}

How’s your graph view looking after this modification?
Mine is a bit broken.

Edit: This fixed it:

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

[Frederick_Lost]

Nice catch, thanks!

[Klaas]

@Frederick_Lost, an excellent suggestion, and to think it just takes 4 lines of code !
I tried out, it worked fine, though without checking out the graph. Then I saw @rsdimitrov’s comment, checked out the graph and it was fine. Huh?

Compared his code with yours (the one I had copied): they’re identical. Huh?
Ah, I see, you corrected your original

So, thank you both for this !!

[BENWF]

Is it “my” theme or is the scrollbar attached to this width?

[rsdimitrov]

Where do you expect the scrollbar to be?

[BENWF]

On the right most side Screenshot with iA Writer for comparison:

[BENWF]

Using

.CodeMirror-code {
	max-width: 700px;
}

currently is good enough for me.

Thanks for nudging me into the right direction, @rsdimitrov!

[ishgunacar]

Thanks! I was wondering if others are getting the tags popup (suggestions after you type in #) to appear way off to the side? Not a big deal but wondering if that is normal or if I’m misimplementing something!

[arceander]

Sorry I am completely new in this world of changing the CSS . I also find same issue as you with the scrollbar, I would like it to be in the right. So, what should I add at the end of the CSS file, this?:

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

[BENWF]

Just the latter. Be aware that this only limits the width, but does not center the text form; the text itself remains left-aligned using this method.

[arceander]

Perfect! Thank you very much, I will try it out

[MooddooM]

.markdown-source-view, .markdown-preview-view works for me but with the scrollbar.
CodeMirror-code does not work to centralise the content. Not sure why??

[Frederick_Lost]

To all asking about the scroll bar: I’m unsure how to fix this for y’all. I personally hide the scrollbar because I find it unnecessary. Maybe trying finding a smaller

than the “…-view” divs to adjust.

[MooddooM]

.CodeMirror-lines, .markdown-preview-view{
   max-width: var(--view-max-width);
   margin: auto; 
}

I found this can move the scrollbar to the edge of editor mode. But I cann’t do anything to the preview mode.

btw: how do you hide the scrollbar. I am newb…

[ryanjamurphy]

Thanks, folks, for the inspiration to implement this.

This selector chooses only the contents of both source and preview, as far as I can tell:

.CodeMirror-scroll, .markdown-preview-section {
    max-width: 40rem;
    margin: auto;
}

[henrique]

That solved for me.

.CodeMirror-lines, div.markdown-preview-section {
  max-width: 800px;
  margin: auto;
}

[ryanjamurphy]

FYI this will likely be less of a problem in 0.7!

[seenimhd]

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;
}

[jellishero]

Which font are using? It looks really cool!