Hi!

I have an odd problem: my converted emoticons are superscript when selected from the emoticon selector (smaller and raised above the rest of the text).

I am not CSS-literate, but I think I can address this in that section. And I think it is something to do with these words, but I'm not sure what to do with them.

font-size:

vertical-align:

line-height:

Alternatively, would it be better for me to download the old converted emoticons, sort them into non-superscript versions, and then upload them?

Suggestions or advice would be appreciated. Thanks!

Hi Brian,
The custom emojis are a little funky, but it should be possible to fix with CSS :)

Font-size will define the height of the font object. This is affecting the text the emoji will be connected to, but since your emojis are images, they will not be directly affected.

Line-height will add or remove some padding to the fonts at the top and bottom. If the line-height is higher or lower than the height of your emoji, then they can be affected and look superscript.

Vertical-align will align the image with the content, and if you set it to middle, it should align to the center of the text.

There are plenty of other CSS attributes that affect this, however.

For me, I had an issue where the emojis did not scale properly and became huge, so I added this small snippet to my theme CSS:

.ipsEmoji img {
    vertical-align: sub;
    width: 20px;
    height: 20px;
}

Not sure if that will help you, but maybe it can be a start?

If you give us a link to a page with the emojis, we can help you better.

Thanks for the reply. I tried out that css, and some adaptions with the font-size too, but had no effect. Feeling stumped.

Here is a post with the emoji issue shown Emoji too small and high on the line