New Responsive Tutorials Mega Thread

[ZubairLK]

Good morning everyone!

Bubble’s new responsive engine is amazing. There are lots of tutorials being made and I thought I’d make a mega thread to start collecting them all to help everyone out.

The basics are covered by bubble themselves
1: Introducing: A New Way of Building Responsive Apps
2: How To Create a Fixed Repeating Group With Bubble’s New Responsive Engine
3: How To Create a Full List Repeating Group With Bubble’s New Responsive Engine
4: How To Create Ext. Vertical Scrolling With Bubble’s New Responsive Engine
5: How To Create Horizontal Scrolling With Bubble’s New Responsive Engine
6: How To Create Vertical Scrolling With Bubble’s New Responsive Engine

I’m sure more will appear on their channel so do subscribe to it: https://www.youtube.com/c/BubbleIO/videos

I did a 2-hour workshop covering flexbox, sign up, left menu dashboard, repeating group cards
7: Bubble New Responsive Tutorial

@jacobgershkovich made a recording going over the messaging interface
8: Bubble’s New Responsive Engine Tutorial 2021 – Building a Messaging Interface

@eli did a live session cloning bubble’s landing page in the new responsive engine
9: Cloning Bubble’s homepage with the new responsive editor!

I have created one more on repeating groups and tables. It has been made and uploaded but is still processing on youtube.

I’m sure there are others that I have not come across.

I’ll try to keep posting any more videos I find here in this one thread as the chatter on my youtube video and other messages seems to indicate that quite a few people have dived into the new responsive during the beta and are a bit lost

Hope this is useful.

Thanks
ZubairLK
https://twitter.com/zubairlk_nocode
https://www.linkedin.com/in/zubairlk/
https://www.azkytech.com/

[eLPDev]

Great idea, @ZubairLK!

[ZubairLK]

The responsive repeating group table tutorial is now live on Youtube as well

Bubble New Responsive: Repeating groups and Table

Thanks
ZubairLK

[jacobgershkovich]

Thanks for putting this together @ZubairLK !

For anyone who’s interested, I also released another video last Friday in which I build a sign up page from scratch using the new responsive engine. You can find that here: https://youtu.be/Okobpne9v-E

[stayshure]

Thanks Jacob!

[boston85719]

I have recently added some tutorials to my youtube channel on the topic.

I have added a companion tutorial on using the group focus element as a profile menu in a reusable header.

[ZubairLK]

Thanks @boston85719 . Solid work!

[whmrc]

This post was flagged by the community and is temporarily hidden.

[whmrc]

This post was flagged by the community and is temporarily hidden.

[fivemeasures]

Building with Group Layouts in Bubble.io's New Responsive Editor

[justin.hume]

20 minutes until the pronocoders livestream with Eli Beachy and Tonya Aiossa.

[fivemeasures]

Bubble.io New Responsive Editor: Design a Messaging UI

[mghatiya]

I have a few elements in a row and I want one of them to be on the right most side of the row all the time irrespective of the width of the row. All other elements should be left aligned and be next to each other just like a typical row.

How to achieve this? In the “layout” section of that element that I want to be on the right all the time, I don’t get the nonant to make it aligned on the right of the parent. My “Container layout” for that element is set at “align to parent” already.

Is there a different thread to ask such questions on new engine?

[alexcooney5]

Video on how to build a floating group banner with the responsive engine below:

Create Floating Group Banners (New Responsive Engine) - Bubble Tutorial

[mghatiya]

Thanks for the reply. Parent element is a row which has other elements too. On changing the container alignment of that, it moves all the elements to the right. Are you suggesting I create container within container? How will that help though?

I managed to get it done just now but with a round about way. In the row I created a group which has layout of “column”. Within the column layout I have another group that has layout of “align to parent” and set to “right aligned”. Within this group I have put my original element.

I had to do this as “align to right” option was coming only in case of column layout.

Now while I have done this, I am not really happy with it as it is not really clean. Also I thought new responsive engine will actually reduce the need of creating group for every damn thing that earlier engine required.

[ZubairLK]

Ideally, specific questions like this should be in their own thread so that when others look, they can find it.

And this particular thread can serve as a host for all the new responsive tutorials.

Thanks
ZubairLK

[ZubairLK]

Just uploaded a new tutorial on building a responsive Landing page.

Bubble New Responsive: Landing page part 1

Thanks
ZubairLK
https://twitter.com/zubairlk_nocode

[jof]

Here is our video - responsive engine from start to finish

A guide to the new responsive engine in Bubble.io

[lantzgould]

My take on a split screen layout:

Split Layout - Bubble.io New Responsive Engine