How to reduce left padding on mobile when readable line length is on?

What I’m trying to do

I want readable line length enabled on desktop, but not on mobile. On mobile, it adds padding to the left, reducing the screen space for the text:

Line length enabled:


Line length disabled:

Is there a way to constrain readable line length just to desktop? Perhaps disable readable line length only on mobile or use custom css somehow?

Things I have tried

This targets the element on desktop, but doesn’t work on the iOS app:

@media only screen and (max-width: 500px) {
  .markdown-preview-view.is-readable-line-width .markdown-preview-sizer, .markdown-source-view.is-readable-line-width .CodeMirror {
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
}

I’ve tried targeting other classes with this, altering left padding and margin, and other options from Adjustable “Readable Line Length” but nothing has worked.

2 Likes

Hi Christophx, is this relevant? You can keep separate settings per device.

This works but it means I have to maintain two separate config directories which I’d rather not do. I still want my custom css snippets to apply across all devices without needing to update two files when making one change. It’d be ok if I could alias the required files to sync within iCloud but that doesn’t work.

I was able to get this working by using separate settings folders for different devices. I used the app Folder Sync to automatically sync changes between both of these folders while ignoring app.json, the file that contains the setting for readable line width.

This feels over the top since I just want one line of one file different across devices. It’d be good to have the ability to choose what Obsidian settings to sync on iCloud like with Obsidian Sync.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.