(New Responsive Engine) How to make this?

Hey bubblers,

Screen Shot 2021-12-19 at 7.04.41 am

In the old engine this was simply an image with a group on top…bring to front etc…

How would we do this exact same thing with the new engine? I’m a bit lost…but I must be missing something as it’s such a simple concept…importantly it should not be fixed width.

It’s a cell within a repeating group… so imagine a long responsive list of these…

Any tips would be greatly appreciated :slight_smile:

Probably the simplest way is to have a group, with a background image, set as a column.

Then inside that group have anther group (the red group), aligned to the left, and with a top margin, then your icon and text inside that group, as you currently have it.

1 Like

I didn’t know about that feature: re setting a groups background to be an image…works perfectly.

Thankyou! Have a great day :slight_smile:

1 Like

As with most things in Bubble (and programming in general), there are likely several viable approaches. @adamhholmes made a good suggestion.

Another possibility is to use the Align to parent layout mode. It seems well suited, as it enables positioning of elements relative to the center, corners, and middle of each side (the so-called “nonants”). Using an actual image element might also offer some advantages, such as specifying a fixed aspect ratio while still enabling the image to change size at different page widths…

food-item-demo
 
 

Note, however, that the layout engine is still in beta, and there are some rendering glitches as the page is dynamically resized. Refreshing the page at any given width will cause the layout to re-render correctly.

(Also, for future reference, there’s a forum dedicated specifically to the new responsive engine.)

Regards,

-Steve

2 Likes

Awesome…that’s also a great way to do it. Loving the new responsive engine.