I’m working on a web app and many times I’ve tried to get things to work and logically I think it will work but then it doesn’t.
I’ve had elements jump outside of their groups once the screen has been shrunk for no apparent reason. I’ve had groups show up in the responsive editor but then disappear in Preview.
I’m starting to question my decision to use Bubble to build my web app.
What a piece of garbage!
Strangely, I’ve had the had the exact opposite experience. Are you certain Bubble is the problem?
I’m sorry that you are having a hard time with the responsiveness in Bubble. It can be challenging. I wanted to offer some free short videos on responsiveness to help you get an idea on how it works.
There are a few videos I have here, just filter the Responsive ones to take a look.
Videos- https://www.nocodeminute.com/1-minute
I hope that helps. 
Don’t give up.
They are doing an editor redesign that they will unevil soon and I think they’re going to be solving a lot of issues with the responsiveness. The responsive editor has its quirks but it does work, you just have to have a lot of patience and play with it. I encourage you to not drop bubble just because of responsiveness, it really is the only platform that is a full stack custom development replacement. I started out on bubble in 2016 and so glad I stuck with them.
Thanks for the support!
This is one of the issues I’ve been getting. For my header, I created a Floating Group to float left with the logo and a Floating Group to float right with the Login/Sign Up button.
This is what I get:
The button is nested inside the Floating Group yet doesn’t want to recognize it and I have no idea how to solve it.
Why two floating group? And are you sure the login is in the floating goup? Check parent of the button to be sure.
It is 100% in the Floating Group
Somtimes by default the pages are set up as fixed width, you need to make sure the page itself is set to responsive. If that’s not the case check that the minimum width of each element is not a very high number.
Interestingly enough I tried this header in a page on my site and it seems to work for now. It’s weird that it completely fails in the Responsive Editor though.
I keep playing around with it to see if it really does work. In any case, thank you for all the comments, it helped we learn more about Bubble and figure this out.
One thing I’ve learned is not to trust the Responsive Editor as it seems buggy.
Haha yeah, using the responsive editor in bubble is quite painful. I’m starting to get the hang of it, but my god do I wish it was more like webflow. There is also a lot of bugs and just random behaviour in there that makes it even more difficult to work with.
The rumours has it they are working on an overhaul… so fingers crossed we will be released from
the current state of things in a not too distant future 
The responsiveness feature can be applied in a few ways, starting with the page itself, and several settings come into play, but not all at the same time. It’s quite the rabbit hole, so let’s get tumbling…
When ‘fixed width’ is unchecked (which your single floating group header should always be), you can set the ‘minimum width’ (which is in %). You can also then enable ‘maximum width’ (also in %, but leave unchecked for floating headers as they usually span the whole width anyway).
You may want to create a reusable group of your header, insert a blank floating group in each page that needs it, and insert the reusable header group into the floating group:
Now you can add your logo inside, set it to ‘left’ and ‘fixed width’ (also, more below). Now insert the login button (actually never do exactly this, see below) on the right side, and set it’s alignment to ‘right’. Here you have a choice of keeping it fixed width or not. If in doubt, test with it unchecked and use the responsive page slider at the top to shrink/widens the page and see what happens. I have yet to see anything different happen in ‘live’ version versus testing it here. When I don’t get what I expect, it always ends up being a matter of tweaking a setting (fixed width, minimum width, and max width), or two elements overlapping (also, more below).
For a useful ‘fixed width’ application insert a group (of fixed width) inside the floating group (which is not fixed width and no max width), right-aligned, and touching the right edge. Inside the group insert one or two buttons, or anything your want, with fixed width (login button, signup button, for example). Leave space between the right-most object inside the group, and the right edge of the group. The width of this gap will now not change as the page width changes. When the page widens, the floating group widens as well, but the group inside sticks to right edge while keeping the same width, including the button(s) inside. And the button will remain in place inside the group.
This is because the group inserted inside the floating group is touching the right edge. If there is a gap between the group and the right edge of the floating group, that gap gets bigger as the page widens (looks terrible). This will also happen to buttons placed directly inside a floating group. As the floating group widens, the gap between the button and right-edge of the page will increase. Inserting a fixed-width group is a good trick to keep one or several things together without changing their size, while keeping them aligned to the sides of responsive pages.
Also, I find it better to build a page at its minimum width and tweak it as it widens, rather than building a wide page and trying to keep elements ligned up vertically when the page shrinks. This is because you can build the elements on a narrow page already ligned up, and then adjust their maximum widths and decide if/when elements should get bumped up to be beside each other as the page widens, of you’re using that feature (‘Wrap to previous line if the page is stretched’).
For your logo, you can use the feature that collapses/hides it (‘Add Hiding Rule’) if the page becomes small enough, which you predefine. If triggered, the logo’s visibility will be set to ‘no’. You can use this as a condition for another smaller logo that is initially hidden, but becomes visible if your main logo isn’t visible.
Also, be very careful about any elements overlapping, or sometimes even touching. The responsiveness engine doesn’t just dislike it, but hates it. You’ll get all kinds of frustrating errors which happen after you’ve done everything else correctly. When the responsive engine appears to have ‘broken’, two elements are probably overlapping or touching. This could be an input field and a text above it with the input’s name, for example. Make the adjustments then test with the page width slider.
This might be alot to digest without pictures, or even confusing. Hope this helps.
I agree that it’s missing fundamental aspects of responsive development and frankly just basic front end web design. Until it’s on par with intuitive no code builders like Webflow, I just can’t justify using Bubble despite how insanely powerful the workflows and database capabilities are.
Even after weeks of tutorials and searching in forums, basic front end things that take 1 min in other services (or just in newbie code) seem impossible here.
If Bubble aligned their design capabilities with Webflow, I’d never look back.
I think once it is understood how responsiveness works in Bubble it is not difficult to build really good responsive front end.
If you are interested in learning how to design responsively feel free to send a PM for details on private coaching.
@crebspark did you give the new responsive editor a shot? What issues in particular are you having?
There’s definitely a learning curve to the new Responsive Editor. It took me a few weeks to feel (fairly) confident that the changes I make would look how I expected on the frontend. It’ll take a bit, but you’ll get better and better with it over time, and I do think now that it’s a huge improvement over the old editor.
Sometimes, though, you need things to be a fixed with to behave as you want, and that’s not always great for responsiveness. What I do in these cases is use an option set that I call “responsive breakpoints” where I set pixel sizes of different screens, then I use Conditionals on elements to change width, height, etc. based on different screen sizes.
For example: “when current page width < [get an option - responsive breakpoints - desktop]'s width”, set width to 98%. Something like that.
For 90-95% of elements, though, I don’t have to do this.
I only wish I could figure out better ways of showing “filler” boxes when content is loading. Everything seems to jump into place once the workflows are done running.
Yes, I upgraded to the Unresponsive editor but instead of fixing my issues with elements disappearing when I click on them (and some more weird bugs), I actually am getting more issues. Now, I can’t seem to edit reusable elements which leads me to just adding single links on them. I had to redo my website. I thought using Bubble is easier than using Wix or Wordpress lol. Also, when repeating groups load, there seems to be a delay in displaying the data. Another thing, when I look at tutorials on pagination and some other topics, the editor doesn’t seem to look the same way as the new editor I’m using and most of those tutorials were actually from a year ago or less. I don’t know but I feel like giving up on Bubble. Maybe I should have just chosen Webflow. I think Bubble should add an AI assistant on the editor… or is that already available? I don’t know, can’t find it in the editor.
Would be cool if there’s an AI guide that tells me the consequences or potential issues everytime I set an element to certain configurations. Maybe give me a list of how to make it better or best practices about the way an element is set up.
The key to this is mastering container layouts - rows, columns, align to parent. Once you master that in general it sets you up with a great foundation to build more advanced things.
Responsive is frustrating.
Yeah hopefully there will be new tutorials out there that are using the same editor menus/displays that the new responsive upgrade has.
