What's the *correct* way of setting width on a per note basis?

Custom CSS & Theme Design
1

I need to control note’s width by class name.
References. Same idea, but the solutions seem outdated:
How to make a single note set full width or 1000px @OF
How do I change width for a specific Note? @OF

This snippet seems like the right solution:

.custom-wide-page .cm-sizer,
.custom-wide-page .cm-sizer * {
  --file-line-width: 1200px;
}

Or, for more flexible control, an SCSS version:

@for $step from 8 through 19 {
    $name: $step * 100;
    .custom-wide-page-#{$name} .cm-sizer,
    .custom-wide-page-#{$name} .cm-sizer * {
        --file-line-width: #{$step * 100px};
    }
}

Is the .cm-sizer the correct parent element for targeting?
Does setting --file-line-width handle everything, or are there other CSS variables that also need adjustment?

2

For most themes (pretty much everything except Minimal), the custom cssclass name and the --file-line-width variable works fine.

e.g.

.wide-view {
    --file-line-width: 1200px; 
}

.full-view {
    --file-line-width: 100%; 
}
1 Like
3

I neglected to mention in my previous post, but the .cm-sizer class only applies to the editor (Source mode and Live Preview), so

.custom-wide-page .cm-sizer {
    --file-line-width: 1200px;
}

will work (as you know) in those views, but if you switch to Reading view you’ll see to note returns to the default 700px.

.wide-view {
    --file-line-width: 1200px; }

^ the easiest and is sufficient to cover the width in all viewing modes.※ :slightly_smiling_face:

※ for all themes I’ve tried except Minimal. Minimal has its own cssclasses built-in and requires a different snippet if you don’t use their “helper classes”.

1 Like