Tag pill looks weird in Preview Mode

[vizance]

Hello Bryan

I just used your Custom CSS today and found the tag pill looks weird in Preview Mode. Please refer to below pictures.

Issue 1

In Editor mode

In Preview mode

The word tag pill looks normal but the emoji tag pill doesn't.

Issue 2

This is another issue if I use emoji in the note.

In Editor mode

In Preview mode

---

I just look up the CSS but don't have any idea. How could I solve it ?

Thanks in advance.

[tallguyjenks]

Send me an email and I'll get you an updated copy of the css, I turned tag pills off because of this

[email protected]

[vizance]

Email Sent, thanks

[vizance]

Hi Bryan,

Thanks for your file, however I still get the same problems. (actually this file is what I get from subscribing your Newsletter)

What I do now is adding the Bryans Gruvbox.css file into my .obsidian/themes folder, not sure I should put other files (ex. preambly.sty) or not.

Should I adjust any obsidian setting ? Thanks (my obsidian version is v0.11.13)

[vizance]

2021.04.10 update

I finally find the solution by myself. Refer to Emojis in links not behaving when using a particular theme - Resolved help - Obsidian Forum , anyone who has this issue can add below css after img css setting.

This is img css in Bryans Gruvbox.css

img
{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

Add below css after

.emoji {
  display: inline-block !important;
}

That's it ! Now issues in this thread are all solved.