New Responsive Tutorials Mega Thread

Tips
1

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 :slight_smile:

Hope this is useful.

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

56 Likes
2

Great idea, @ZubairLK!

1 Like
3

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

Thanks
ZubairLK

6 Likes
4

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

8 Likes
5

Thanks Jacob!

6

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

Single Cell Repeating Group - New Responsive Engine Bubble.io

Dashboard Page Layout - New Responsive Engine Bubble.io

Reusable Header - New Responsive Engine Bubble.io

Full Page Loader - New Responsive Engine Bubble.io

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

Learn how to create Group Focus Profile Menu in New Flexbox Responsive Engine in Bubble.io

6 Likes
7

Thanks @boston85719 . Solid work!

1 Like
11
4 Likes
12

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

13
2 Likes
14

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.

Screen Shot 2021-11-28 at 7.51.15 PM

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

15

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

1 Like
17

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.

19

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

1 Like
20

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

landingpage

Thanks
ZubairLK
https://twitter.com/zubairlk_nocode

3 Likes
21

Here is our video - responsive engine from start to finish :slight_smile:

2 Likes
22

:wave: My take on a split screen layout:

3 Likes