Hi There,
I’ve created an animation of emojis that lives within the body text of the message on my homepage. To get this to read as one sentence, I’ve put an Emoji Image, the word “to”, and an Emoji Animation into a column within the “Horizontal Align” Div Block. The formatting for this works fine when viewing on a laptop, but I’m having a hard time finding a format that will make this effective as a responsive website. Does anyone have any suggestion on how to make this better suited for a responsive website?
Thanks!
Zach
Hey @webbydebbie! Check out this screenshare below. Just a couple notes:
- You probably need to play with the GIFs/emoji icon sizes to they image dimension is square (50x50px for example)
- The circle character I used is a unicode character - you can copy and paste it from this here ◯
Let me know if this is the solution to your problem, thanks!
1 Like
I would suggest the don’t make me think model since you are talking about UI. You have a hero block of text. Select part of it (no Emoji’s) and wrap with a span. Hide the span on >mobile. Take the Emoji’s div and hide on <tablet. Remember that Google is indexing as mobile and won’t “read” your Emoji’s. You would end up with a broken string of text that might make people think there is a spelling error. JMHO
Thank you so much for helping me out! Your method worked really well and I was able to do it easily. Again, thanks so much!
1 Like
Awesome, it looks great, and I am glad it worked for you!