Emojis Running Into Text

Is there any way we can resize emojis to make them smaller so that they’re not running into the text to the right of it? Or can some padding be added to the right of the emojis to push the text over a bit? Emojis just don’t look good that close to the text…

Any help would be appreciated.

Do you have any CSS on that tab? I just tested and these show up correctly for me.

No, I don’t have any CSS on any of the pages. I’m on an iPhone 12, running iOS version 15.3.1.

Those emojis are on an iPhone? They look like android style….

2 Likes

Can you share the link for us to test?

Yes, tap on the Teams or Roles icon at the bottom of the screen.
https://go.glideapps.com/support/5b7bb742-59a6-46a9-ba49-5395f81b3533

Also, not sure if this is because of Support Forum software that Glide is using that we’re currently on, but when I pasted in the URL, I got this message in the auto-update area to the right of the text box.

Thanks, @ThinhDinh

Yep, emojis are on the iPhone.

Support links are only useful for the Glide team. They are of no use to the rest of us in the forum.

3 Likes

Which browser? Any accessibility settings turned on?

Google Chrome on Windows 10 OS. No, all accessibility settings are at their default settings…off.

Wait, are you seeing this in Windows or on iOS? You mentioned iOS earlier.

Emoji are not images. They are text and the look of them varies from device to device depending on OS as well as version of the OS.

It’s on both actually. On the iPhone, it still looks like the emojis are pretty close to the text, especially when you compare the padding on the left side of the emoji to the padding on the right side of the emoji. You can see how there’s more padding on the left side of the emojis by looking at the grey lines above and below, and how they extend further than the emoji.

Here are 2 screenshots from different screens on my phone, same app.


I just checked one of my concept apps that uses emoji the same way and I’m noticing the same thing. Chrome on Android here.

I’ve seen similar posts in the past, but I’m not sure if it was every resolved. I hadn’t noticed any issues before, until now.

Please try this to see if it helps.

<pre><span><style>

[data-test="list-item-emoji"] svg {
height: 100%;
width: 70%
}
5 Likes

@tristan :point_up_2: :point_up_2: :point_up_2:

1 Like

Awesome, that worked. Thanks so much! I went ahead and set the width to 80%.

1 Like