# Optional Full-width note (CSS)

**URL:** <https://forum.obsidian.md/t/optional-full-width-note-css/15444>\
**Category:** Themes & CSS snippets\
**Tags:** ui-ux, custom-css\
**Created:** [March 28, 2021, 2:27pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444 "2021-03-28T14:27:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![g\_hz](https://forum.obsidian.md/user_avatar/forum.obsidian.md/g_hz/32/12294_2.png) [@g\_hz](https://forum.obsidian.md/u/g_hz)\
**Post date:** [March 28, 2021, 2:27pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/1 "2021-03-28T14:27:15Z")

</div>

Hi !

First contribution here. A little CSS snippet so you can have some notes with full-width just by adding a CSS class into the yaml frontmatter. (It just affects the preview.)

 ![full-width](https://forum.obsidian.md/uploads/default/original/2X/6/6d05f043faefcba320c7c50d413a15284b108c0e.png)

**Required:** disable the `Options > Editor > Readble line breaks` parameters.

**The css snipset :**  
[optional-full-width.css](https://forum.obsidian.md/uploads/short-url/aDM4C7uiDxdce8Q5uKEpjo96BQP.css) (220 Bytes)

```
.CodeMirror-lines, .CodeMirror-selected, .markdown-preview-section {
  max-width: 700px;
  margin: auto;
}

.full-width .markdown-preview-section {
	max-width: 100% !important;
}

```

**Yaml frontmatter:** Just add `cssclass: full-width` if you want the note to be full-size.

---

<div class="post-metadata">

**Author:** ![SilvioDylan](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/eb9ed0/32.png) [@SilvioDylan](https://forum.obsidian.md/u/SilvioDylan)\
**Post date:** [October 1, 2021, 2:49pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/2 "2021-10-01T14:49:37Z")

</div>

Just what I needed. Thanks a bunch!

---

<div class="post-metadata">

**Author:** ![Pwnstar](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/5daacb/32.png) [@Pwnstar](https://forum.obsidian.md/u/Pwnstar)\
**Post date:** [November 7, 2022, 1:02pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/3 "2022-11-07T13:02:47Z")

</div>

I think this should be the default

---

<div class="post-metadata">

**Author:** ![Akasiek](https://forum.obsidian.md/user_avatar/forum.obsidian.md/akasiek/32/52942_2.png) [@Akasiek](https://forum.obsidian.md/u/Akasiek)\
**Post date:** [September 4, 2023, 1:12pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/4 "2023-09-04T13:12:09Z")

</div>

Thank you for this snippet. Although I have a problem with it. When in edit view, all pages are full width - not just those that have css class.

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [September 4, 2023, 3:01pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/5 "2023-09-04T15:01:11Z")

</div>

This snippet is very old.

Can you share what theme you are using and what you want to do? e.g, full width on all notes, 800px wide on all notes, full width only on certain notes, etc.

---

<div class="post-metadata">

**Author:** ![Akasiek](https://forum.obsidian.md/user_avatar/forum.obsidian.md/akasiek/32/52942_2.png) [@Akasiek](https://forum.obsidian.md/u/Akasiek)\
**Post date:** [September 4, 2023, 6:21pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/6 "2023-09-04T18:21:39Z")

</div>

Thank you for taking interest in my reply.  
I’m using AnuPpuccin. I wanted to have a css class than when given to a file it makes it full width. It should be full width in edit mode and read mode. Otherwise files should look like before.

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [September 4, 2023, 8:02pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/7 "2023-09-04T20:02:19Z")

</div>

Give this a try:

```css
.full-width {
    --file-line-width: 100%;
}

```

And in the YAML of the note(s) you want to change:

```auto
---
cssclasses: full-width
---

```

---

<div class="post-metadata">

**Author:** ![Akasiek](https://forum.obsidian.md/user_avatar/forum.obsidian.md/akasiek/32/52942_2.png) [@Akasiek](https://forum.obsidian.md/u/Akasiek)\
**Post date:** [September 4, 2023, 9:22pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/8 "2023-09-04T21:22:37Z")

</div>

> [@ariehen](#):
>
> ```auto
> .full-width {
> --file-line-width: 100%;
> }
> 
> ```

Works perfectly! Thank you so much 💜

---

<div class="post-metadata">

**Author:** ![BrigadierG](https://forum.obsidian.md/user_avatar/forum.obsidian.md/brigadierg/32/58011_2.png) [@BrigadierG](https://forum.obsidian.md/u/BrigadierG)\
**Post date:** [December 13, 2023, 1:41pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/10 "2023-12-13T13:41:30Z")

</div>

The above did not work for me. The variable is not `--file-line-width` from what I see, it is just `--line-width`

```auto
.w-full {
    --line-width: 999rem;
}

```

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [December 13, 2023, 4:23pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/11 "2023-12-13T16:23:41Z")

</div>

> [@BrigadierG](#):
>
> The variable is not `--file-line-width` from what I see, it is just `--line-width`

`--file-line-width` is indeed the default property that works with most themes. The theme you are using may define it differently.

---

<div class="post-metadata">

**Author:** ![BrigadierG](https://forum.obsidian.md/user_avatar/forum.obsidian.md/brigadierg/32/58011_2.png) [@BrigadierG](https://forum.obsidian.md/u/BrigadierG)\
**Post date:** [December 13, 2023, 4:27pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/12 "2023-12-13T16:27:03Z")

</div>

This turned out to be the case - Minimal theme uses `--line-width`, default is `--file-line-width`

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [December 13, 2023, 4:35pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/13 "2023-12-13T16:35:38Z")

</div>

Minimal has its own [helper classes](https://minimal.guide/features/helper-classes#Block+widths) built in, so you could use `wide` or `max` for a cssclass as well (with no custom css snippet).

---

<div class="post-metadata">

**Author:** ![bonka](https://forum.obsidian.md/user_avatar/forum.obsidian.md/bonka/32/54936_2.png) [@bonka](https://forum.obsidian.md/u/bonka)\
**Post date:** [February 10, 2024, 11:20pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/15 "2024-02-10T23:20:10Z")

</div>

I figured it out _but_ it only works in edit mode, and I can’t figure out how to make it work also in reading mode. This applies to all themes, even the Minimal theme @ariehen mentions.

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [February 11, 2024, 1:21am UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/16 "2024-02-11T01:21:24Z")

</div>

> [@bonka](#):
>
> I figured it out _but_ it only works in edit mode, and I can’t figure out how to make it work also in reading mode.

I don’t know the CSS you are using, but `--file-line-width` (or `--line-width` for Minimal) takes care of all three viewing modes, (_Source, Live Preview, and Reading_), without a lot of fuss.

If you wanted a snippet that works for most themes, including Minimal, something like this should do. (The `!important` is in there to take care of a theme or two that sets a custom `file-line-width` on the `body`.)

```css
/* set a custom readable line length for all notes */
body {
    --custom-line-width: 75rem; /* <- change this */
    --file-line-width: var(--custom-line-width) !important;
}
body.minimal-theme.minimal-theme {
    --line-width: var(--custom-line-width);
}

```

or on a per-note basis with a cssclass of `wide-view` (for example):

```css
/* set a custom readable line length for notes with a cssclass of <wide-view> */
.wide-view {
    --custom-line-width: 75rem; /* <- change this */
    --file-line-width: var(--custom-line-width);
}
body.minimal-theme.minimal-theme .wide-view {
    --line-width: var(--custom-line-width);
}

```

Tested with the default, Minimal, Shimmering Focus, Prism, Everforest Enchanted, etc., themes.

**NOTE:** _Settings \> Editor → Readable line length_ needs to be enabled for these to work.

---

<div class="post-metadata">

**Author:** ![bonka](https://forum.obsidian.md/user_avatar/forum.obsidian.md/bonka/32/54936_2.png) [@bonka](https://forum.obsidian.md/u/bonka)\
**Post date:** [February 11, 2024, 12:49pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/17 "2024-02-11T12:49:36Z")

</div>

Ah, thanks a lot for this!

I was trying to make my own implementation using max-width, but couldn’t manage to get rid of an annoying scrollbar that hugged the text. The use of _custom-line-width_ is far better and it is even working across all themes. Thanks!

---

<div class="post-metadata">

**Author:** ![2fifty6](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/2/34f0e0/32.png) [@2fifty6](https://forum.obsidian.md/u/2fifty6)\
**Post date:** [March 22, 2024, 4:35pm UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/18 "2024-03-22T16:35:53Z")

</div>

So I’m using the `wide-view` cssclass to good effect for an ultra-wide window use case. However, I’m finding it still doesn’t get as wide as when I turn off the “readable line length” option in Settings. How do I get that last little bit of width that disabling that option delivers?

For example, below are two screenshots of the same demo window. The `wide-view` cssclass is active in both cases. The second also has “readable line length” disabled. What I want is the additional content width of that second screenshot but only for the `wide-view` cssclass. There must be more at play here than just `--file-line-width`!

 ![image](https://forum.obsidian.md/uploads/default/original/3X/3/a/3a38ab3684cd6e4f59e79163f6a84ee0269b56a1.png)

 ![image](https://forum.obsidian.md/uploads/default/original/3X/b/a/bad7b2e766cbfb734e5305306b096edeaee07d96.png)

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [March 23, 2024, 12:08am UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/19 "2024-03-23T00:08:24Z")

</div>

If you switch to the default theme, using this:

```css
.wide-view {
    --file-line-width: 100%;
}

```

should be identical to having _Readable Line Length_ disabled.

* * *

I immediately saw the difference using Minimal, so I’m assuming you are using it (if it’s not Minimal, let us know what theme it is). Using a `100%` in the original snippet, it seems Minimal has a big margin for the inline-title, metadata-container, each line, etc.

Minimal →

 ![Screenshot 2024-03-23 at 8.36.26](https://forum.obsidian.md/uploads/default/original/3X/0/f/0f5b81fbf2c620725b931363dfd94ac4ff620d2d.png)

Default theme →

 ![Screenshot 2024-03-23 at 8.37.44](https://forum.obsidian.md/uploads/default/original/3X/b/b/bb7e71bd26fb38f987e78eedea9966330cb8b3b2.png)

A max-width is set for the inline-title, metadata-container, main body, and so on:

 ![Screenshot 2024-03-23 at 8.54.23](https://forum.obsidian.md/uploads/default/original/3X/5/1/51a0659cd85dc70d12ba3d8333a2bf0576f75550.png)

So you could add that `max-width` to the original snippet to override Minimal and see how it goes. It’s working for me with Minimal, and as it’s isolated to only the notes with a `wide-view` cssclass, I don’t see any immediate issues in any other areas.

```css
.wide-view {
    --custom-line-width: 100%; /* <- change this */
    --file-line-width: var(--custom-line-width);
}

body.minimal-theme.minimal-theme .wide-view {
    --line-width: var(--custom-line-width);
    --max-width: 95%;
}

```

---

<div class="post-metadata">

**Author:** ![2fifty6](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/2/34f0e0/32.png) [@2fifty6](https://forum.obsidian.md/u/2fifty6)\
**Post date:** [March 26, 2024, 5:59am UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/20 "2024-03-26T05:59:19Z")

</div>

Yup, I am indeed using the Minimal theme, and adding that `max-width` parameter did the trick. Thanks!

---

<div class="post-metadata">

**Author:** ![angelmarauder](https://forum.obsidian.md/user_avatar/forum.obsidian.md/angelmarauder/32/78030_2.png) [@angelmarauder](https://forum.obsidian.md/u/angelmarauder)\
**Post date:** [March 11, 2025, 4:05am UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/21 "2025-03-11T04:05:19Z")

</div>

Signed up to answer here:

 ![image](https://forum.obsidian.md/uploads/default/original/3X/e/3/e394b18853cf00f9e808c48225470facba8005d6.png)  
There is an options in the menu under Editor → Display for  
“readable line length”

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [March 11, 2025, 4:23am UTC](https://forum.obsidian.md/t/optional-full-width-note-css/15444/22 "2025-03-11T04:23:21Z")

</div>

That setting is for **all** notes in a vault. This topic is about keeping _readable line length_ for most notes, but only changing a few that you want wide using CSS and `cssclasses`.