How to fix tag pills?

[hatlady05]

Things I have tried

I am using the Cybertron theme and a few css snippets that I found here on the forum. One of them was for formatting tags as tag pills. Everything had been working great.

What I’m trying to do

I haven’t made any additional changes to the theme or the css snippets, but my tag pills are suddenly looking wonky. They are more circular than oval. The hashtag and the emoji stack vertically rather than staying horizontal. Any ideas what’s causing this or how I can fix it?

[Obsidandnancy]

I’m not an expert, but this is probably what I would do…

This is the kind of thing that requires troubleshooting. Unless someone just happened to have the same exact issue and responds, saving you the trouble.

Assuming you didn’t make any changes or add any new third party plugins prior to the issue occurring…

Possible causes…

1. The Obsidian app itself could have updated and that changed the tag pill display. In this case, you might have to adjust your css. See below.

2. A third party plugin updated and that changed the css. Again, your css snippet could over ride this if set up properly.

3. Your theme could have updated and that changed the css. Again, css snippet.

In any case, the only way to figure it out is by experimenting. Try switching to the default theme, try disabling suspect plugins that change appearance, you might need to disable all the plugins (do half at a time to quickly narrow in on which half contain the problem and then repeat with the remainder until you find the culprit).

Its entirely possible that your css snippet is missing an “!important;” that would override the theme or a plugin css. Again, you have to experiment.

[hatlady05]

Thank you! I tried adding “!important” to the tag pills css, but that didn’t work. So I tried turning off the other css snippets one at a time to see if they were causing a conflict and I found one. Strange, because it had been in place before I started using tag pills and there wasn’t a conflict before. But I removed the “!important” from that css snippet and now both work!

I appreciate the help and your very clear advice.