Fixing Readable Line Length

[alaris]

Hi, I need a little help fixing a problem i’m having with some css snippets.
I am using the Dataview Cards snippet from here: Snippet so you can use Dataview Cards from Minimal theme in any theme to create a reading list.

I am also using 2 other snippets, the dashboard snippet to make my homepage full width, (Homepage plugin), I also use the dashboard-ReadLineLength snippet from the creator of Homepage to only have my startpage full length, and not the rest of my notes.

The problem is, once I enable the cards snippet, all of my notes are full length, which I don’t want to happen, and the dashboard-ReadLineLength is supposed to keep the rest of my notes normal width.

I have tried switching on and off the readable line length toggle in settings, and it did nothing.
I’ve also switched on and off each snippet one at a time, just to make sure that it is the cards snippet that is affecting it, and it is. I’m not sure what else to do; if anyone could help me, i’d appreciate it.

[efemkay]

what theme are u using? technically u should be able to simply add the following snippet and use it in the frontmatter

body .wide-page {
    --file-line-width: 100%;
}

• or if u like, can check out my shared CSS snippets collection that would help u have wide dataview
• https://github.com/efemkay/obsidian-modular-css-layout

[alaris]

I think you misunderstood what I mean, sorry. I am trying to have my homepage, stay as a full length page, and have my reading list be able to be in cards view (which uses the full screen in reading mode), and have the rest of my notes in the normal default smaller width pages.

I’m saying that the css snippet that i’m using to create the cards view for my theme, since i’m not using Minimal (i’m using Tokyo Night) is conflicting with the other snippets in some way, and i’m not sure how to fix it.

I’m using:

• dashboard snippet for my homepage dashboard - https://github.com/TfTHacker/DashboardPlusPlus/blob/master/.obsidian/snippets/dashboard.css

• dashboard-ReadLineLength to only have my homepage use the full width page. https://github.com/TfTHacker/DashboardPlusPlus/blob/master/.obsidian/snippets/dashboard-ReadLineLength.css

-cards to create the dataview cards for my reading list (the conflicting plugin that makes all pages full length, even with the dashboard-ReadLineLength snippet.) Snippet so you can use Dataview Cards from Minimal theme in any theme

Hope this makes more sense, sorry.

[efemkay]

yeah. i thought you were having issue with full width in general.

anyway, i think i know what’s your issue at hand. the cards snippet (as per your link) was extracted from Minimal theme. And it was expecting a CSS variable --max-width and --line-width to be defined but it wasn’t in that particular snippet (because I think Minimal define it in the main CSS.

i tested with Tokyo Night theme, adding these few lines would resolve it. anywhere would be fine, but add right after /* With readable line width */ would be logical.

see my notes at bottom of this post

body {
    --max-width: var(--file-line-width);
    --line-width: var(--file-line-width);
}

here’s the result

before

after

---

Important
I did not stress test this, so it’s possible it may affect display of your other notes. I would personally rework these line of codes because this affect display of all notes in your vault regardless whether you specify the cards at the frontmatter or not

/* With readable line width */

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
  max-width: var(--max-width);
  width: var(--line-width-adaptive);
  padding-left: 0; }

.markdown-source-view.is-readable-line-width .CodeMirror {
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto 0 auto;
  width: var(--line-width-adaptive);
  max-width: var(--max-width); }

/* Readable line width off */
.markdown-reading-view .markdown-preview-view:not(.is-readable-line-width) > .markdown-preview-sizer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--folding-offset); }

.is-mobile .markdown-source-view.mod-cm6 .cm-gutters {
  padding-right: 0; }

[alaris]

Thank you! Works great!