I have gone through the tutorial that is in-built in the editor and Bubble’s webinar related to responsiveness. Both are good for an overview but things fall apart when I try to build complicated apps.
Any free or Udemy courses that help with responsive builder?
Hi @sharma.himanshu0608 
I wrote a guide here: https://medium.com/littlebay/how-to-make-centered-elements-responsive-in-bubble-5f58eb1daae6
It’s mostly an overview, but it may be helpful! Feel free to let me know if you have any questions!
Hi Faye - quick question for you: I have an element that I would like to stay left flushed, until the page shrinks to a certain point, at which case I would like it to be centered on a mobile device. What’s the best way to do this?
As you can see, the 1st image is keeping my Babysitters, Nannies, Daycares group left aligned, but I need it to be centered in mobile view. In the right picture, that group is left aligned (as it should be).
Hi @calicass83 
Right! That setup is a little more complicated since using a left fixed-margin will always keep that group ‘fixed’ to that left-side. As a workaround, you can set the left-fixed-margin text group to be ‘centered’ instead, and then use a transparent group to fill the rest of the space on the page, which shrinks as the page decreases in width, and eventually collapses in width:
Once the page reaches mobile width, the right-side green group collapses, and the left-side text group immediately becomes centered since its the only element left on the page, and is set to fixed margin: centered. Here’s how it will look:
The page right before the green group collapses in width:
The page right after the green group collapses in width:
Preview link:
Editor link:
In this example, there is a single group which contains all of the top section’s elements called “Group Top section”:
Also, this Group Top section element has left and right side margins of 20 pixels, as shown in the editor (screenshot below). Since the margins are equal in size, this will help make sure the elements inside of the group are centered at all times as well:
Within the Group Top Section element, there is the neon green group on the right-side (this group’s background color will be transparent in your app so it’s not visible to the User):
This neon green responsive group should have a very small minimum width to ensure that it continues to shrink as the page decreases in width (otherwise, it will move to the next line too early):
This group also has a responsive, hiding rule set on it which collapses its width when its container width is less than or equal to 600 pixels:
Next, there is a darker green group which contains the white, text group (but in your app, this dark green group’s background color would be transparent as well):
This dark green group contains 20 pixel margins on all sides:
Having this dark green group is not mandatory, but it adds an extra ‘cushion’ of margins when the app is viewed on larger screens – until the page gets closer to mobile width. As the page gets closer to mobile width, we don’t necessarily need these 20 pixel margins anymore, in addition to the Group top section’s 20 pixel margins (equaling 40 pixel margins). As a result, we can collapse these 20 pixel margins by adding this hiding rule to the inside, white group element:
This way, when the white group’s “container” (the dark green group) reaches around 320 pixels in width, those 20 pixel margins will collapse and the white group will fully expand the width of the Group Top section element:
(Just to see how this works, here is the dark green group at 321 pixels in width. The 20 pixel margins are still visible because the white group’s collapse rule is set to collapse the margins only when its container, the dark green group, is less than or equal to 320 pixels in width)
(And here is the dark green group at 320 pixels in width. The 20 pixel margins have collapsed in width because the white group’s collapse rule is set to collapse the margins only when its container, the dark green group, is less than or equal to 320 pixels in width)
And here’s how it all resizes from desktop to mobile:
With transparent backgrounds:
I know this can be pretty confusing when first setting it up – please let me know if you have any questions at all, or if I can help in any way!
Interesting.
Great example, thank you.
Thanks, @niall_obrien! No problem at all!
Awesome article, thanks a lot Faye!
That’s a really wonderful tutorial, Faye. Thank you!
