Change paragraph size both editor and reading mode

Devs: Theme Design & Custom CSS
1

Hello,

Using a widescreen (or not really that wide) makes the text look awful. I added a CSS snippet to make it more readable but it only affects reading mode. In reading mode looks fantastic but in editing mode still looks awful. I tried with both the options of limit “Readable line length” on and off.

/* Adjust the width of paragraphs in the editor mode */
.markdown-preview-view p, 
.CodeMirror pre, 
.CodeMirror-wrap pre {
  max-width: 800px !important; /* Change this value to adjust the maximum width of paragraphs */
  margin-left: auto;
  margin-right: auto;
}

How do i fix this?

2

What theme do you use?

3

Minimal. does that affect?

4

I’m ussing this snippet. Check if it works for you (I haven’t any theme installed)

body {
--file-line-width: 800px !important;
}
5

Depending on the theme you use, there may be options in their settings or specific CSS that’s needed (the CSS Tanto_Monta posted above is usually fine).

Using the Minimal theme, it’s easy! → Install the Minimal Theme Settings (if you haven’t yet) and change the “Normal line width” here (mine is set to 42). This will change editing and reading modes with no CSS necessary.

Screenshot 2023-05-02 at 4.52.14
Screenshot 2023-05-02 at 4.52.141622×1378 189 KB

6

worked like a charm!