Responsive height of elements

[fish]

Hi Everyone,

I’m trying to make my app more responsive - When the screen size gets smaller I reduce the font size of my main title (using the condition tab of that element).

However, the space above and below that title stays the same and it doesn’t look really nice on small screens.

This is on widescreen:

This is currently on small screen:

Any idea how I can reduce those upper and lower gaps around the title?

Thanks!

[fish]

Solved it myself:

Thanks Bubble for this awesome option!

[rico.trevisan]

Hold on! Did you just answer a question I didn’t know I had?

Did I get this right?

• You are changing the font height depending on the device. Say, it’s 72px normally. It drops to 36px when width < 960px.
• The element height in the editor is, say, 72px. Which works fine when you’re on laptop. However, when you are on mobile, it leaves a lot of blank space.
• Checking the the “shrink the element…” option handles that problem.

I gotta test this out.

[rico.trevisan]

It works!

Shrink off

Shrink on