Adjust Margin depending on Different rows

I want to set each dynamic texts which has one or two rows.

But the height doesn’t work dynamically, so it has too margin below or less like…

スクリーンショット 2020-11-22 2.10.51
スクリーンショット 2020-11-22 2.11.26
スクリーンショット 2020-11-22 2.11.58
スクリーンショット 2020-11-22 2.12.42

Even writing all these two text elements in the rich text editor, the same, too wide margin or too narrow margin.
Is there a better way to adjust spacing beautifully ?

For keeping the margin at the bottom consistent, you could try checking the “shrink the element if the text gets shorter” box on the text.


Need help with your bubble app? Reach out to us at protomakr.bubbleapps.io

Thank you for your comment.

First of all I tried that but almost all of text is too shrunk so I stopped it.
Actually in above example, “Little…”, “SHAKISO…”, it becomes too short.

By too short, do you mean that the margin on the bottom is too small? You can make the text element as big or small as you want, and it will fit to the text if you check that option. So if you always want 20 pixels on the bottom, you can set it so the text ends 20 pixels from the bottom.

Yes, exactly it is. But I want to keep about 10px margin between bold text and thin text even when texts are in one or two rows.

like this :

Make sure the bold and not-bold texts are in separate text items, then set a 10px distance between them. Then check “shrink this text when the content gets shorter”.

I tried “shrink this text when the content gets shorter”, but separated bottom one doesn’t move to shrink margin.

スクリーンショット 2020-11-22 8.25.39