Responsiveness Advice

Hello, Bubblers! I’ve been out of the bubble for a couple of years. Now I’m trying to create a new app and noticed the new responsiveness engine which is driving me mad to make it mobile responsive.

Please advise me on the best practice to keep it mobile-friendly from the very beginning. Are there any pre-set configurations, that If I follow them may do most of the trick?

Flexbox responsive system so much better than the old, especially once you get the hang of it.

Tips:

  1. Allow your containers as much as possible to control the width of the child elements through use of padding on the container plus min/max width settings on container while child elements (if they should expand to fit the entire container) have 0 min width and leave max width empty

  2. Get familiar with the different layouts of row and column

  3. Practice with some example layouts and try to recreate them

  4. Use the gap spacing on row and column layouts of containers instead of margins on the child elements of containers.

  5. Watch the multitude of videos on the topic on youtube from Bubble and 3rd party video creators

  6. Use the elements tree to move elements into positions or the buttons on the elements layout tab of ‘first/last/previous/next’

  7. Use the copy and paste function from the edit at top of screen while making sure you select the correct elements via the elements tree (selecting elements on the page itself is difficult)

  8. Remember that when the element has a collapse when hidden checked, if you hide it in the editor it will collapse in the editor (at first annoying, but actually very helpful at times)

  9. For text elements to change size make use of the container elements width value in conditionals rather than the page width (now have access to element width and height values and not just the page width).

2 Likes

Hey @martin2, happy to see you again :hugs:

I completely agree with @boston85719. New system so much better the old one. However it takes time to adapt new one of course.

Bubble itself created a game-template for better understanding. You can play with it, it’s very educational and fun.

2 Likes

thx @batuhanmerguz and @boston85719 for the advice! There is any template that I can use that already comes with cards and elements mobile-ready as well?

Yes, just check out the marketplace