Responsive height of elements

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:

image

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

Thanks!

Solved it myself:

image

Thanks Bubble for this awesome option! :slight_smile:

1 Like

Hold on! :exploding_head: 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 :fried_shrimp: the element…” option handles that problem.

I gotta test this out.

It works!

Shrink off
2021-06-16 11.46.45

Shrink on
2021-06-16 11.47.19

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.