Element takes minimum width even when there is space available


I have faced this issue often and I don’t know how to solve it. Sometimes it gets solved automatically when I am changing something else.

So the issue is that when I assign minimum width to an element, many a times while rendering in mobile, the element takes minimum width even if there is enough space available.

e.g. I have a floating group on bottom. I want it to take 100% of width available in mobile, but go to minimum of 320px. However, even when mobile width is 360px, it is going to minimum of 320px leaving an awkward white space.

This element is not within any group. Just on the page directly.

How to fix this?


Could you send a couple of screenshots of the group on the page and then the responsive settings for it?

My hunches are:

  • the group is not touching the sides of the page
  • the group has a max width setting

Sure. It is a reusable element.

Here are the settings.

Reusable Element:

Element Tree of reusable element
Screenshot 2020-10-21 at 12.39.01 AM

Top group inside reusable element

Group inside top group to make it appear in the centre of all screens:

Responsive setting of the reusable element
Screenshot 2020-10-21 at 12.38.45 AM

And for odd reasons that only Bubble understands, I can’t apply responsive settings to a reusable element at the point where it is placed, so can’t share that.

Please let me know if you wanted to see something else too.