Shrink the element width

On text element, we have an option that “Shrink the element height if the text gets shorter.”

Do we have another option that “Shrink the element width if the text gets shorter?”

When the text height shrinks so does it’s width. If you want to shrink the text width without shrinking the height, the text will look distorted. What is the reason you want to shrink the width? Maybe there is a workaround for your problem.

2 Likes

Content width in Bubble is handled by the responsive engine, so if you set your page to be responsive you can have your elements be different widths on different pages.

If you want to change it for other reasons, then there’s a few workarounds:

  • Show a different version of the same element that happens to be narrower (and hide the original version)
  • Use CSS Tools plugin to change the width of the element
  • Use Custom custom javascript to change the width of the element

Best of luck!

3 Likes

A good use case for this is when you have a badge count set up - imagine a badge count graphic which is a text element, displaying 2 initially and counting up to display 200. Currently the text flows downwards rather than the element expanding horizontally to accommodate the 200. Granted you can display three different elements based on each hundreds, but that is less elegant.

3 Likes