“Don’t stress the small things” they said. Yet, the smallest of things all come together to make what we know and love today as Twitter. Emoji is one of those added extras that makes Twitter great (check out EmojiTracker). Sometimes it doesn't go to plan.

The Problem

The Emojis shown on the follow intent page are wayyy too big, check it out:

https://twitter.com/intent/user?screen_name=getemoji

Unless this is Twitter’s way of catching onto the trend of increasing the emoji size in chat messages — following the footsteps of iMessage, Snapchat etc. there is a solution.

I’ve been learning CSS for a little while now. freeCodeCamp is a great website to do that — you go though some programming challenges with increasing difficulty until at the end you become a coding ninja! 💯

To change the size of these huge emojis we need to apply the height and width CSS properties to the emoji. We want to make these small so that they fit the height and width of a character.

If we open up the Safari Web Inspector we can create a new CSS selector targeting .Emoji.

.Emoji in the Safari Web Inspector.

Now we can add our properties to the CSS selector. I’ve set the height and width to 1.25em which will fit well with the size of characters. The em means ‘ephemeral unit’ and is relative to the current font size.

I’ve also added a vertical-align property of -0.2em. All this does is moves the emoji down slightly.

That’s it! The emoji are all the correct size now and are looking good. 👏🏼

Perfectly sized and aligned.

If you’re more of a visual person I’ve also created a video demonstrating this — maybe you can apply this to another website and see what small things you can fix?

I created this post to show how easy it can be to improve how a website works and to also apply my CSS knowledge in the real world. Happy tweeting!