Please put me out of my responsiveness misery

I’m converting my pages from “old” to “new” responsiveness.
I have a Search box in which Users type part of a name and it returns results from that User’s own Contacts and from the wider App “Userverse” below. It used to look like this…

Edited Image2

Now it looks like this…

Edited Image Now

With everything squished upwards

This is a link to my editor…

Can anyone tell me what I need to do to get it back so the search results aren’t on top of eachother?

Hi Joe - trust me you will love the new responsive editor.

I find the “align to parent” is not actually useful in practice.

I’ll DM you - if you make me a collaborator I’ll fix that in 2 minutes (and you will soon be able to also) :slight_smile:

Thanks Lindsay
I’m sure you’re right and I thought I had the new editor sussed until now…I’m not sure how to make someone a collaborator…could you tell me how I do that and I’ll do it. I really appreciate the help.
Many thanks

settings → collaboration → invite a user

edit of development is enough (you can remove me after )

I only have the “Personal” plan so I don’t think it’ll let me add anyone as a collaborator which is annoying. I can’t afford the extra $100/month to do so at the moment so I’m unable to add you unfortunately…is there another way?

Agency users (like me and others) can be added to any app.

I suspect I’m doing something wrong…it’s telling me this…

Can you advise? I do really appreciate your assistance!

There are Bubbler’s with much higher design values than me and will have more opinions - but I am in the “do it fast, functional and good enough” team :slight_smile: and these are my tips on “new” responsive …

  • Watch some videos to get the concepts - I like this one Bubble Responsive Design Crash Course - YouTube (this is one of many)
  • New responsive thinking is “let the container do the layout of it’s child elements” - old responsive thinking was “tell each Element how to position itself” … so it’s a new way of thinking about Bubble layouts
  • When you convert pages from old to new - do not click the “attempt to convert responsive layout” - this adds more things I find I need to undo - padding in particular
  • Fixed widths - use to size an element - not to layout an element
  • Padding on individual elements is a pain - let the container of the element position the individual elements
  • Align-to-parent as a layout is conceptually easy to understand but not very useful I find in practice
  • I find making everything “fit to height”, “fit to width” almost always the default size - most common to have a maximum or let the parent container fit the group/element
  • The default values when you create a new Element are almost always un-helpful
  • Padding at the style level on groups is very useful
  • I use the group “apply gap spacing between elements” all the time - and padding on elements rarely
2 Likes