New Responsive Engine [beta] is Live!

These are really really great additions @manasi.maheshwar ! Should this not be on the level of an Announcement post of it’s own rather than just a thread reply out of 600 though? :slight_smile:

1 Like

Great minds think alike, Emmanuel suggested the same thing :slight_smile: We’ll be announcing future New Responsive feature updates in their own thread & cross-linking the new announcements in the OG post.

6 Likes

Drag and drop in the Elements tree is great - thanks. Probably a better solution to my problem of excessive redundant groups after converting pages (although the future ability to move multiple elements at once will be even better). Thanks!

Any one else notice huge differences between chrome/firefox and safari? Everything in safari looks broken compared to firefox/chrome/bubble editor

1 Like

@nick.carroll - Is there a plan to include viewport metrics for setting min and max height/widths of elements? An example usecase is the top hero of a homepage with a specific background image. Ideally, I would set the height to 100 vh and width to 100 vw and let the engine crop and stretch the background image. Currently there is no solution.

3 Likes

@Kayami Just started noticing this; it’s a bit of a showstopper :-/

@Kayami and @screenrankerapp, can you provide some specifics? I generally test on all major browsers on both Mac and Win (although not every single page on each browser). I’ve not yet found any issues on any of my page layouts.

I’d be happy to double check a specific design or setup if you can show/describe exactly what’s going awry. Might be best to post your setup to the bugs forum instead of this announcement thread though. If others can confirm the issue, an official bug report might be warranted.

1 Like

Honestly, Bubble could learn a lot from page builders like Divi with WordPress in terms of responsive features. Being able to change every setting based on device size is so powerful with Divi, and hopefully one day Bubble will get there.

At the very least, I’d love to see CSS class fields for every element by default. Then we could at least reorder on different devices with custom CSS a lot easier.

3 Likes

@nick.carroll not sure if it was considered, but “preserve aspect ratio” for video would be pretty helpful. I’m having a pretty tough time sorting out a video element, and “preserve aspect ratio” would save me a lot of math time.

Also, not sure if anyone mentioned, but would also be nice if selecting “preserve aspect ratio” didn’t default to “1x1”. Not sure if there is a function I’m not considering here, but it seems like the default should be the image’s current width and height, because that is the current aspect ratio. Right now, every time I select “preserve aspect ratio”, I have to go back to my OS, inspect the file and get the dimensions, and then input the “preserve aspect ratio” parameters.

5 Likes

Super exciting! Love this. Big step forward for Bubble page design.

Any chance there are plans to introduce transition settings for width/height changes? :innocent:

Glad to hear this! Any chance this update to the drag/drop plugin means the plugin will support either:

  1. relative positioning/percentage-based positioning to support the new responsive engine, so drag groups stay anchored as parent resizes (thinking for image hotspots and the like), or
  2. dynamic x/y from thing’s fields/conditions similar to the new dynamic width/height

Or perhaps both? :slight_smile:

2 Likes

Haven’t noticed a huge difference. Except for the shiny drop downs, I get the same on Chrome and Safari (but I’m on mac).

1 Like

ITS HERE! PADDING

image

image

Note you have to have immediate release enabled

13 Likes

image

This setting is pretty glorious! Deliciously organized!

7 Likes

It sure is !!! saving lots of clicks :slight_smile:

:heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes:

So stoked!!! Padding and row gaps will make the responsive engine much more useful and adoptable. Thank you!

2 Likes

Going in for the first time & I’m pretty blown away by how powerful it is.
Incredible job!

1 Like

@nick.carroll
Is it possible the options: Make first, previous, next, make last, to be available on conditional tab, this is huge for deep customization and for RTL languages.

4 Likes

I think what is still extremely confusing is how groups and sub-groups interact. It is a lot of trial & error for me. I just want a group to be 100% of viewport height but sometimes that leads to a super long page on mobile but not on desktop etc. And I just don’t know how I should configure everything from page down to groups to subgroups etc.

I just want the page to stretch to 100% in height and then enable scroll bar if the content is too long for the viewport.

1 Like