Responsive Design

I have an older app that I made over a year ago, and didn’t design it with responsiveness in mind. It is now in pretty bad shape, and I have no idea how to fix the responsiveness. From what I have seen, there was an update where newer apps are responsive out of the box. Is this true? If so, does it work well enough to where I can just re-do my app?

The responsive engine, once you learn how to use it, is really powerful and can result in fantastic looking apps. I definitely suggest watching the official video from Bubble on the topic, as you’ll have to think a bit different about it, but it’s for sure worth it.

You should be able to go into the page element and constrain it to a certain size

If you want to work on the page to make it responsive, here are some tips

  • pretty much everything needs to go in a group
  • every now and then the width of groups might change slightly, like if you paste something into it. so if the page suddenly stops responding the way it did before, check the width of your groups. I’ve had several problems that cleared up when I fixed a group from 322px back to 320px
  • Bubble doesn’t tell you this, but it assumes anything at the same horizontal level is in a “line” that’s invisible and inscrutable. You have no control over lines, but they affect the behavior of your elements anyway. It’s relatively intuitive if you think of it like word wrapping, just with elements
  • if two elements overlap they will be treated as one element
  • it seems best to design and build the page at the smallest width you expect, and have it expand out from there
1 Like

@blueback09 I agree, think mobile or minimal first and go from there. One thing I’ve struggled with is pop ups following this principle. Not reusable elements just native pop ups . I can’t seem to get them to be responsive although they are not set to fixed width they will not expand .