Simple CSS snippet to resize split panes on iPad (e.g. 60 / 40) + hotkey toggle

Share & showcase
, ,
1

After banging my head against this for a while I realised there’s no native way to drag‑resize two side‑by‑side panes on iPadOS. Even with a mouse the hover‑based handle won’t budge, and every thread I found either trailed off or concluded with “works on desktop only”.

So I tried a CSS workaround—and it does the job. I use it to read and annotate PDFs (the pdf on the left pane, the notes on the right pane).

1 · How it works

Obsidian lays out panes with Flexbox. Each pane’s .workspace-tabs element carries an inline flex-grow: 50, which keeps them locked at 50/50. A snippet that forces different flex-grow values (with !important) lets you pre‑set any ratio you like.

2 · Minimal 60 / 40 snippet

/* 60 / 40 split on any iPad (tactile or with mouse) */
@media (min-width: 768px) {               /* avoids iPhone */
  .is-mobile
    .workspace-split.mod-root
    > .workspace-tabs:nth-of-type(1) {
      flex: 3 1 0 !important;             /* ≈60 % */
  }
  .is-mobile
    .workspace-split.mod-root
    > .workspace-tabs:nth-of-type(2) {
      flex: 2 1 0 !important;             /* ≈40 % */
  }
}

Put that file in .obsidian/snippets/, enable it, reload UI, and the first pane now takes ~60 % of the width while the second gets ~40 %. Disable the snippet and you’re back to 50/50.

3 · Toggling with a hotkey

Install Snippet Commands (Community Plugins). It registers a “Toggle snippet: <name>” command for every CSS file in your snippets folder.
Assign a hotkey (Settings → Hotkeys) and you can switch the 60 / 40 layout on or off instantly.

4 · Multiple ratios

Nothing stops you from keeping several snippets—split‑70‑30.css, split‑80‑20.css, etc.—each with its own hotkey. Instant layout presets, no drag handle required.

5 Likes