Removing embed border not working on mobile only

[govsat1]

I’m using this handy snippet to granularly clean up embeds.

IE ![[embed file name|clean]] removes border and indentation. This works great on desktop, but not mobile (ios), the blue bar on the left is not removed. Other aspects of the “clean” target work fine, so I’m not sure why only that bit does not work.

I thought --embed-border-color: transparent; would cover it but apparently not. Using the default theme, disabled other snippets. Any help appreciated.

Relevant part of the snippet:

.embed-clean .internal-embed>.markdown-embed,
.embed-clean .internal-embed.is-loaded:not(.image-embed),
.internal-embed[alt*=clean]>.markdown-embed,
.internal-embed[alt*=clean].is-loaded:not(.image-embed) {
  --embed-border-color: transparent;
  --embed-border-left-color: var(--embed-border-color);
  --embed-border-right-color: var(--embed-border-color);
  --embed-border-top-color: var(--embed-border-color);
  --embed-border-bottom-color: var(--embed-border-color);
  --embed-border-left: var(--embed-thickness) var(--embed-border-type) var(--embed-border-left-color);
  --embed-border-right: var(--embed-thickness) var(--embed-border-type) var(--embed-border-right-color);
  --embed-border-top: var(--embed-thickness) var(--embed-border-type) var(--embed-border-top-color);
  --embed-border-bottom: var(--embed-thickness) var(--embed-border-type) var(--embed-border-bottom-color);
}

Embed on desktop:

Embed on mobile:

[ariehen]

The first two .embed-clean lines look like a custom class, so any notes you want that to take effect need:

---
cssclass: embed-clean
---

at the top.

No cssclass and no alt:

cssclass: embed-clean and no alt:

That said, your snippet as is, using only the alt text |clean]] in the link, seems to be working for me on mobile:

Hmm.
Double check that the snippet content is the same (as desktop) and enabled on mobile?

[govsat1]

Thanks for testing. No luck on my mobile, even if I use the cssclass. Strange.

Can anyone confirm what I should be targeting to remove the left embed border?

[ariehen]

To simply remove the vertical line, you could use one of the Obsidian variables for embeds. Tested with the default and Anuppuccin themes.

body {
  --embed-border-left: transparent;
}

[govsat1]

Good hint, I figured it out - for whatever reason, the line --embed-border-left: var(--embed-thickness) var(--embed-border-type) var(--embed-border-left-color) was not taking effect (again on mobile only-weird).

I commented it out and added the --embed-border-left: transparent; from your snippet above within the ‘clean’ target and all is good.

Personally I dislike using front matter (at least Obsidians current implementation of it), I thought the original snippet’s method of targeting certain features based on alt text was pretty cool.