Overlapping links in AO3 Feeds

[anaraine]

So, for no reason that I can divine, the AO3 feeds (and only the AO3 feeds) look wonky on my reading page, like so:


The links overlap each other and while it's possible to read them when there aren't a lot of tags, it does get a bit irritating. I figured I'd just slap in a tiny little fix in the Custom CSS to make the spacing better, but I poked around and couldn't get anything to work.

This is what I thought it should look like, but it didn't seem to do anything:
.page-read .entry-wrapper.poster-ao3_batman_allmedia_feed .entry-content {line-height: 2em; ]

Help, pretty please?

Comments

[facetofcathy]

This problem is caused by the fact that the AO3 feeds come into Dreamwidth (and everywhere else) complete with the class names on the various elements.

The culprit is the .tag class that the links in question have via the AO3 and DW uses as well. Your style puts a lot of padding on .tag, and that's causing the overlap.

There is a bug on this at the AO3, but I couldn't tell you how long the fix will take. You will need to target the a.tag elements inside that feed and take off the padding in the interim.

This should work: .entry-content a.tag {padding: 0;}

[anaraine]

*twirls you* Thank you so much, that did the trick! ♥

(Also, thank you for the explanation - I was wondering where I was going wrong.)

[facetofcathy]

Glad to help.