Responsive layout (beta)

@josh / @emmanuel I feel you guys are trying to make this too complicated, and, frankly, it’s not easy to understand how to use, or configure, the new options; and the documentation doesn’t really explain it. It would be so simple to allow us to say I want something to be 100% or 80% and so on – especially when putting containers inside of containers – if a child container is set to 100% it should always be as tall or as wide as the parent container. Why do the elements make me specify a fixed width and then have all of these “but” options – but you can “apply a maximum width when the page is wide”. What does that even mean? I have a degree in Computer Science and have more than 10 years in web development and design, but have no foggy clue what “when a page is wide” means.

3 Likes

That’s a good point. I’ll look into making custom elements be able to be floating groups (in addition to regular groups and popups).

1 Like

I’m sorry that you don’t like the way this came out. We’re pretty committed to letting the user draw things wherever they want on the page, and inferring margins, padding, and other responsive behaviors from how they draw things. You’re coming from a background where you’re used to specifying exactly how you want the page to behave, and I understand that this feels like a step backwards to you since it’s designed for less experienced users. We’re going to continue to improve the usability of it, add missing features such as the floating custom elements that you brought up above, and work on improving the documentation (https://bubble.io/chapter/building-responsive-pages-1460743187240x663465764401971200). But we are likely not going to do a major overhaul of how it works, at least not any time soon, and letting you specify percents would involve a lot of changes to how we calculate where things should go behind the scenes. Anyway, I’m sorry you’re not thrilled by it, and we do appreciate the feedback and will continue to make smaller improvements wherever we can.

2 Likes

Thanks Josh! At least that link helped me understand what you mean by “wide”. I’m probably missing something technical that made you put “when a page is wide”, but why doesn’t “Apply a maximum width” mean the same thing at this point? Are you going to have other options to apply a maximum width at different break points?

I would really love to fully commit to building on Bubble, but it’s just a difficult choice at the moment.I do value the work the Bubble team is doing and your responsiveness to the community. Keep up the good work!

@josh @Kfawcett
As a non-coder the options shown actually made sense to me pretty easily. I guess not needing to unlearn current practices made it easier. I’m super glad the bubble team is keeping the non-developers in mind. If it were complex I’d probably not be using it anymore.

That said there is definitely an issue when repeating groups are put inside parent groups. The group doesn’t shrink and goes outside the boundaries of parent group.

@gaurav on the issue about the repeating group, can you share a link?

Here’s an issue I’m having.

Design view

Preview view

Again, if we don’t have a link to test, we can’t help much unfortunately.

@emmanuel Will share in a bit. Don’t have it handy.

And for this a bug report is probably best, it’s easier to track.

I fixed the layout issues by turning off on the repeating group and the header

1 Like

Great. We’ll probably change the wording to “when the page is stretched”, should be easier to understand.

3 Likes

or “Apply a maximum width on high resolution devices (> 1280px)”?

I’ll think about it.

Why not leave the responsive algorithm as automatic settings, and create a checkbox “override auto”, then allow the user to set manually the options (margin, pixels, percentagem, anchor etc) for each element? Would it be the best of both worlds?

i’ve just done this but it didn’t change anything

In building mode I can see all of my Hidden elements but not in responsive view.


Is it possible to do the same n responsive view for us? The only way that I can get to my hidden elements in responsive view is to remove the conditional settings every time which is not practical. Mistakes creeps in.

Can you email support@bubble.is for this, we’ll look into it.

1 Like

When a group’s width is 600 px in a full width page of 1200 px, it should continue to maintain 50% width of page when the actual screen is wider than 1200 px if a page is responsive is it ?

Yes, as shown here https://forum_app2.bubbleapps.io/version-test/responsive?debug_mode=true

except of course if you have a min or a max width