I wanted to have a discussion about responsiveness. In particular, I wanted to ask about the rationale behind what I consider the most frustrating part of responsive design: The decision to send elements to a new line before shrinking the margins.
In general, when the page shrinks, there are three things that can be changed:
The size of the element
The margins of the element
The line the element is on
The order that bubble seems to adjust these is as follows:
The size of the element (up until the element’s minimum size)
The line the element is on
The margins of the element
The size of the element (beyond the element’s minimum size)
Having element size change until its minimum first makes sense to me: you have controls over the settings of how small an element can get. However, having the element go to a new line before it adjusts the margins makes less sense, and leads to a fair amount of annoying and counter-intuitive behavior.
To be clear, I’m not talking about left or right fixed margins, which should be preserved. I’m talking about when elements are set to “center” but bubble still prefers to send them to a new line before shrinking their margins.
In this example app I set up, you can see the behavior at work. At 1080 pixels screen width, the buttons are on the same line, as is expected. However, as soon as the screen size changes to 1079 pixels, you can see one of the buttons move to the next line, even though there is plenty of room for them:
The only reasoning I can think of for why responsiveness is designed this way is so that elements maintain a gap between them as the screen is shrunk. It would be unfortunate if the buttons in the above example ended up with 0 margin as the screen shrunk. However, this can be easily addressed by wrapping the buttons in individual groups with margins on either side. Trying to get buttons to adjust with the current implementation is quite annoying.
Could someone at the bubble team (or anyone else, for that matter), provide any insight as to why its designed this way? Perhaps I am missing some reason why it can’t be designed in the way I proposed?
The buttons are currently centrally aligned. That’s why when the width becomes 1079 px, they move to the next line. In the responsive tab, if you align the first button with left alignment and the 2nd button with right alignment, they would be on the same line as long as it meets the minimum width criteria for the parent group. Hope that helps.
You’re right about that behavior. I actually considered putting an example with left and right aligning. The problem with doing things that way is that when they DO wrap (when the screen can’t fit all 3 buttons on one line anymore), the buttons will be left and right aligned. So if you viewed the app on a small mobile screen you wouldnt end up with 3 centered buttons, as you would want.
That is correct. To fix that, don’t keep a max width on the buttons. This way, when they are on different lines, they will take the whole screen width looking like they are one below the other correctly (even though they have different alignments). You still need to adjust the minimum widths for each button correctly so that they don’t go on different lines very soon, or the very long width buttons might not look good on a mobile layout. It does require some trial error a first few times, but once you get your hand on it, it’s not that difficult.
Thanks for the shout out! I will definitely try to chime in when I have some time next week. I have been booked with appointments and haven’t had much free time. I will set another reminder on this post to take a look, to see if it was solved or not, next week.
Your solution should work, if you don’t need the buttons to have a max width, so thanks for that. Another one I have thought of is to wrap the buttons in groups with the desired minimum margins between them, and have the groups shrink instead.
To be clear though, I didn’t make this post for help with any particular app. The demonstration app I linked was just the easiest way to demonstrate my point, which is that it seems bizarre to me that bubble designed responsiveness this way.
I’d appreciate any insight you could offer. I’ve been working with bubble for enough time now to encounter and discuss things like this, but I am by no means a veteran, so I appreciate contribution from the more senior members of the community. I’m mostly just trying to open a discussion amongst bubblers and the bubble team as to why its designed the way it is, and what improvements can be made (if any).
Once there is a clear understanding of how responsiveness works and the rules behind it, it really is a lot easier to work with. I think the best way of understanding why the responsive engine works the way it does is by going to the co-creator himself and the Bubble Reference Guide:
Thanks for the links. I took a look through them, and while most of it was stuff I knew, I did pick up a couple tricks (including another way to address the button problem mentioned above)! Unfortunately, I didn’t see any mention as to the rationale behind why elements break to a new line before margins shrink. Perhaps @emmanuel can shed some light?
I also hate this, why the element goes to the next line before shrinking the margin? one trick I found is to remove the “apply max width” from the element, counterintuitive but somehow works!
