Emoji is always displayed in a new line

[adithyaselv]

Emoji is always getting displayed in a new line 😢 and also i am not able print two emoticons consecutively.

[parkr]

Can you give exact example of each, including your markdown renderer and the context (page? Post? Etc)

[adithyaselv]

I am using gaya theme and whenever i try to use an emoticon (in post as well as page),its getting printed in a new line. This theme uses kramdown as default.

[parkr]

This is a problem with the theme. It's applied display: block to all the images.

[adithyaselv]

Oh Thanks will try to find a way to fix that

[LoLei]

If you find a workaround please let me know.

My theme applies

img {
        display: block;
        margin: auto;
        width: 90%;
    }

to all images, including emojis, which makes them streched out over the page.

Would be ideal if one could create an exception to not apply that CSS to emojis or small images.

[parkr]

Would be ideal if one could create an exception to not apply that CSS to emojis or small images.

@LoLei That's not possible when you have a CSS directive on the tag name (img). This is not something we can fix – you must correct your CSS.

[LoLei]

Yes sorry, I wasn't implying you should implement that, I'm just saying it would be nice for it to work like that.

[DanBennettUK]

img.emoji {
display: inline;
}

Just add that to the scss of the theme.

(Apologies for bringing up old issue - just helping if anyone comes here from googling like I did!)

[connorjan]

I added the following to my css to get the results I wanted:

img.emoji {
    display: inline;
    height: 1em;
    width: 1em;
    margin-bottom: 0.25em;
}

Hope this helps someone 😄

[marcin-chwedczuk]

This works with Jasper theme:

img.emoji {
    display: inline-block;
    left: 0;
    transform: none;
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    padding: 0;
    margin: 0;
}