Icon not displayed next to last word of text on mobile breakpoint

Any suggestions on how to fix on mobile breakpoint please? :slightly_smiling_face:

From what little I know about these element settings, you need to configure the 3 modes separately, so that, in each of the modes, it looks the way you want (as if each mode were a custom state). In this case, as in the other modes, the element is not fit in the text and has more lines (due to the small width), the icon is aligned above. it is a block configuration, not the text itself. ( :thinking:)

An alternative is to use a BBCode to place the text itself in a way that is concatenated with the text displayed in the element.

Hope this helps!

Best Regards, :wink:

Understood on configuring the 3 different breakpoints thanks @felipegranado. What I don’t understand is how to lay it out in the mobile breakpoint. Not sure what you mean by using BBCode? Can you elaborate please?

1 Like

Looking closer, perhaps BBCode doesn’t help you. BBCode you can place icons by combining characters. ex. :slight_smile: , :frowning:

When watching video, the alignment is at the top and the width is automatic. It seems that on Mobile, the width is extended and does not fit the text.

The only thing I can think of is a little complex: calculating a Top Padding with the minimum height value of the text element subtracted by the fixed size of the icon element, but for this, the height of the icon element has to be the same as the text element. example: the text element is 20px(min). the icon element would also have to be 20px (fixed) (even if the icon itself is smaller in size). If the text element increases in height, this height - the height of the icon element would be the Padding Top, leaving the padding dynamic.

Well, it’s pretty late at night here :joy:… I need to rest!

Good luck!

If I have another crazy idea, I’ll post it here!

If it is not extremely mandatory, you can still place this icon before the first name, this way, it will always be aligned and with much less complexity.

Thanks for the suggestions @felipegranado but that won’t work either. If I were able to shrink the sides of the text box to only be as wide as it needs to be, that would fix it:

Any suggestions please @Joyce? :slightly_smiling_face: