Section 5 (Lesson 6/8): This lesson will focus purely on responsive design. We’ll make sure our design looks fantastic at different breakpoints and that we’re considering how certain elements behave at mobile phone width.

We’ll also cover:

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

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

Before we jump into the job display page, we forgot to do Responsive Design for the search page, so let's just resolve that problem and then we'll continue.

So let's have a look at the Responsive Design on this page. So at 1200 px, looking good. I can see some padding here, lovely stuff. What about 992 px? Still looking okay, these inputs are becoming a little bit small, but this card is fine, so is this card. 768 px? Okay, clearly, this design doesn't work.

So what we'll say is beneath 992 px - which I'm going to click on now, please do the same - and below 992, why don't we push the Group Sponsored to the bottom of the page, just above the Footer? As I said, realistically, you would be using pagination or some means to display less results on page load. So that sponsored post would get seen as a person scrolls to the bottom of the page.

So let's do this. So currently we have our row container, and what we'll do is we're going to click on Group Sponsored and on the Conditional tab, we'll say that when "Current page width < 992," lets change the width to 100% so that is forced down to its next row.

Let's also copy this. I'm going to right-click, click "Copy special," "Copy conditional expressions," and then on Group Content, let's right-click, "Paste special," "Paste conditional expressions." So at 991, both want to occupy their 100% available space, and Group Sponsored will get pushed beneath. Okay, so let's pull the handle down to test, and there we go. There it is down there.

Now we need some space, so I'm going to bring up the... let's use the Elements Tree here to get to Group Sponsored and I need to just get behind this group, so right-click and "Show first parent." There we go. On Group Container, we had column gap of 48 px, so let's add some row gap of 32 px. There we go. Nice and neat. So down on the mobile phone width, we can see that the sponsored post is separate from this job post.

So now what we have to do is remain at 375 px and then click on Group Inputs because we need to do the same thing here. So on each of these inputs, I'm going to say right-click and "Paste special," "Paste conditional expressions," and we can see it starting to take shape. If you no longer have that in your memory and your clipboard, you can go to the Group Sponsored, right-click, "Copy special" and "Copy conditional expressions." I'm just going to go through each one and say "Paste special," "Paste conditional expressions." Another one, "Paste conditional expressions." We do want this to be edge to edge as well. "Paste conditional expressions."

We have a hidden button as well, don't we? So what we need to do is I've enabled the visibility on the Group Reset, which has then shown the Group Buttons, so it's on the Group Buttons' group that we paste conditional expressions and also, lastly, on Button Reset as well.

How else can we improve this? And let's also do the Footer in this lesson. So what I want to do is make sure that this text shrinks down at a certain width as well. I've just noticed that we have some min width and min height, which I'm going to remove both on Text Discover exciting tech jobs at Workplace. Then I'm going to head over to the Appearance tab, and I'm going to edit the style of Heading 2.

So we're going to set this at the Style level and not at the Element level, just because I want this text, h2, wherever it is used in this app, I want it to become smaller below 992 px. Across the app, nice and consistent, done from one location and editable from one location. So on the Conditional tab for Heading 2 in the Styles tab, we'll say, When "Current page width < Tablet (992 px)," then the font size, which is currently 60, we're going to drop this down to 48. And I think all the other settings will do. Let's have a look. Head over to the Responsive tab and look at that, guys. Far, far better for responsive design.

Now, in terms of this Group Section, we need less padding on the top and on the sides because this is padding that is relevant for a larger screen. So in my Responsive view, I'm going to double-click Group Section. I'm going to head down... right, okay, I can see a small problem: I've overridden the style. What we need to do is this: detach the style. Let's create a style for a Group Section. Okay, so I've detached the style. Now I'm going to create a new style. I'm going to call this "Section." So in the Style dropdown on the Appearance tab we have: Card Large, Card Medium, Group Border, Section and Standard Group.

So a section will always have 96 px in the top and bottom, 32 px left and right. Let's now edit the style of the Section, and on the Conditional tab, we'll say When "Current page width < Tablet (992 px)." Currently, the on the padding top and bottom are 96 px, so below 992 px, I'd like them to be 64 px. Smaller screen, more real estate. Same with the left and right padding. Instead of 32 px, we're going to make them 16 px and 16 px. Once you've done that, let's jump back into the Responsive tab, and look at that! Far, far more relevant for a phone.

Okay, let's do the Footer and then we'll finish this lesson up. I'm going to click "Edit element" in the Footer's Property Editor. Because it's a reusable element, we need to be clicking this button. Now on the Responsive tab, click on 992 px. And actually the 992 px looks fine. I suspect 768 px would look fine. 375 px is a problem. I'm not sure if I've lost my breakpoint, but I'm sure it used to have a 576 px here. There it is there, 576 px. Might have to re-add this. Click "Add custom" in the "+" icon and type 576 in the Responsive tab. You should do the same if you don't see a 576 px breakpoint. So this is a bit of a bug, guys I apologize if it's being a bit buggy for you. There's 576 px.

So it's beneath 576 px where it starts to become problematic. Remember, we could have more links in here, okay? And actually what we need to do here is far simpler. It's in this Group Container that we need to head over to the Layout tab and just add some gap spacing. It's going to be on the row gap. Let's add 24 px, and that solves that problem. But what about this spacing here? We don't have a style for this because this is a border with a unique color, so what we'll do is just add these changes conditionally. The top and bottom will still remain 48 px, that's fine, but I want 16 px left and right. So again, When "Current page width < Tablet (992 px)," so it's the same as the other design work we've done, I'm going to look for left and right padding and change both to 16 px.

Okay, we still have this little problem here, and to fix that back in this Group Container, we just need some column gap of 24 px. I wouldn't normally do this, but I suspected that that problem might exist. Sort of an arbitrary width. We're going to head back to the search page. Responsive design. Head down to 768 px. Yeah, looking really good.

Okay, so as you can see, we do have to add our breakpoints, but for the most part, the way we're designing is responsive within its nature, meaning that we're setting up our rows and columns, our padding, our gap spacing, all of that we're preparing for this end stage where we don't have to fight or tussle and guess the responsive design. We know that we have a breakpoint. It's 992 px or it's 768 px or it's 576 px. At that stage, consistently throughout the app, we'll probably be changing the design. There is a process. Try not to veer from that process. Try to design the way you've learned to with this course, which is consistently, throughout the app, using consistent breakpoints to then apply these conditional changes.

Finally, we can jump into the next part of the section, which is designing the job display page, so I'll see you in the next lesson.