Section 2 (Lesson 6/8): In this lesson, we’ll focus on responsive design, which means making sure your application looks and functions perfectly across all devices. Responsive design in Bubble lets you create a seamless user experience, whether on a desktop, tablet, or mobile phone.

What you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Okay, let's dive straight in and finish up this page. So on the "Sign up" button, if I edit the workflow again, I said that we would come back to the option where we need to send an email to confirm an email. And this is also something that Bubble takes care for us. Just in the background, what's going to happen is that they'll be sent an automated email with a link. They will then click the link and then be taken to this particular page, and it's at that stage that Bubble knows this person is probably a real person because that email landed in someone's inbox and they clicked this particular link, okay?

So we're going to check this box, but we need a page here. So we will create a new page. This will be called "email-confirmation." We'll create that, and then let's select it. Now, we're not going to design this page or do anything further with it, we'll get back to that when we actually sign someone up.

The next thing I'd like to do is some responsive design guys. So let's pop over to the Responsive tab, and this is going to be a very straightforward one. On the Responsive tab, please click on the 1,200 breakpoint. Then double-click on this Group Column. Over on the Layout tab, I'd like you to first select "Collapse when hidden" because we're going to hide this at a certain width. So let's set up that condition to hide this column.

On the Conditionals tab, we're going to define another condition. Like from Section one, we're going to use a page width condition. Typing "page" to bring up "Current page width," less-than sign, and I'm going to choose 768. I'm going to choose the option that it gives me. And then I'm going to select the dropdown to say, below 768, I'd like you to hide this column, please. And then Flexbox will sort out what needs to happen with this particular column, and what will happen is that it will span the full width and it'll be nice and centered for a mobile phone.

Okay, so now I'm going to click these breakpoints, so let's have a look. So we are going to run into a small issue that's easy to fix, but I'd like to demonstrate what that is. So if I click on 992 and you do the same, the design still looks great! Renders well, got some padding around here, even though we actually haven't set any padding. But now, if I choose 768, now we're running into some problems here. We need to provide some left and right padding in this Group Container.

So double-click the Group Container to bring up the Property Editor. Then on the Layout tab, scroll to the very bottom, and let's just set up some left and right padding of 16 and 16. Why 16 and 16? Because we're down to mobile phone width and we want more real estate. We don't want a huge amount of padding left and right. And then now, if I bring this handle down a bit, we can see what happens down to 375. Nice and neat, edge to edge, easy to use.

Okay, folks, just a short lesson. We're done now on the sign-up page. Well, we're done for now. We do need to come back and continue to work on our sign-up workflows. But before we do that, I also want to set up the login page because from a design perspective, it's almost done. We just need to change one or two things and then add a password reset popup as well, and then we'll jump back into the logic, sign some users and continue building. So I'll see you in the next lesson.