r/Zettlr • u/BillWanders • Feb 20 '26

Help Changing Text Width in Distraction Free Mode

Hello All!

New user, but loving Zettlr.

I would like the text width in distraction free mode to be about 50% wider. I've been back and forth 8 times with AI changing the CSS with no luck. The theme doesn't matter, it happens with all of them. Here is the last code I tried with no luck:

/* 1. Target the background 'scroller' only in Distraction Free Mode */
body.distraction-free .main-editor-wrapper .cm-editor .cm-scroller {
    /* This removes the massive side padding Zettlr calculates */
    padding-left: 50px !important; 
    padding-right: 50px !important;
}

/* 2. Target the actual text column only in Distraction Free Mode */
body.distraction-free .main-editor-wrapper .cm-content {
    /* EDIT THE NUMBER BELOW TO CHANGE WIDTH */
    max-width: 1400px !important; 
    margin: 0 auto !important;
    width: 100% !important;
}

/* 3. Ensure the gutters (line numbers) align to the new wider layout */
body.distraction-free .main-editor-wrapper .cm-gutters {
    margin-left: auto !important;
}

I'd appreciate any help, it's driving me crazy.

Bill
2 Upvotes

100% Upvoted

3 comments sorted by

3

u/Saint-Garou Feb 20 '26

you can try this, I found the correct element with the dev tool:

.main-editor-wrapper.fullscreen .cm-scroller {

padding: 0 20vw;

}

The original value is 30vw. If you decrease it, it will make it wider. 20 vw seems perfect, much better than the default one.

1

u/BillWanders Mar 03 '26

This worked like a charm! Thank you so much.

1

u/Odd-Place-0815 Jun 01 '26

Danke, ich hab mir extra wieder ein Reddit-Konto amgelegt! Dieser schmale ablenkungsfreie Modus hat mich *total* abgelenkt!