Section 1 (Lesson 7/10): Continuing where we left off in Part 1, this lesson dives deeper into finalizing the hero section of your Bubble app. We focus on enhancing the visual appeal of your hero section by adding a background image and ensuring that the design remains responsive and looks great across all devices, including desktop, tablet, and mobile.

In this lesson, we cover:

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

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

So we've done the hard work with this Hero section. Now, we're going to be adding our background image and then we're going to make sure that the design looks great across desktop, tablet, and mobile. Let's dive in.

Okay, let's have a look at the demo app. Let's go to the "Responsive" tab. That's 1400 wide, so this is how your users will be seeing the app. Okay, so maybe they're on a smaller screen, 1200. Maybe they pick up their tablet: 992. Maybe they pick up even a smaller tablet: 768. And then maybe they are using their phone. So you can see that the design has adjusted. I've adjusted quite a few things: I've made the text smaller, the padding has changed, the buttons are now in a column stack as opposed to side by side in a row, so let's start.

So the first thing I'd like you to do is just detach the style of this group. This is now going to enable us to upload an image which we'll access from the background style. We'll choose image, and now head to your resources folder to find the background image for this page.

Now we're just going to check the box that says "Make image as wide as parent element" and make sure that "Crop the image to fit the element size" is checked as well. And don't worry about these settings for now. We're going to be getting a lot of practice working with images.

So we can see we need to adjust a few things. First of all, on the Title text, let's override the black color and change it to the white color. Let's do the same with the text above it and then with the subtitle as well. Looking really good.

So in this particular image, I made sure that I edited the image before I uploaded it to make it slightly darker. This is really, really important and Google will actually mark you down if you don't have sufficient contrast between the text elements and the images behind it, so you need to make a concerted effort to make sure that the assets you have

control over, such as the hero images, are properly formatted in a way that users will be able to interact with the elements on the page.

Okay, let's talk about responsive design now. So please click across to the "Responsive" tab. Currently, your default is 1400. Let's click on 1200- it's looking pretty good. 992 is still working, still fine, there's nothing we need to do at this particular breakpoint.

What about 768? So you can see that this text is getting very, very close to the sides. So what we're going to do now is actually add some padding to our "Group Section."

Let's go back to the UI Builder and double click the image to bring up "Group Section".

On the Layout tab what I'd like you to do is scroll to the very bottom of the Property Editor and on the left and right sides we're going to choose 32 pixels. Close the Property Editor, click across to "Responsive", and now you can see that a change has been made. I'm just going to pull this back slightly so you can see we now have padding on the left and the right side of the parent container. It's always best to set padding on a parent rather than on the text itself. See how it's adapting?

Now let's go back to the UI Builder because on this particular H1 text, your Heading 1, let's go over to the Styles area and click across to Conditional. I'm going to remove this condition so that we can recreate it. So now we're going to define a Condition, and this condition basically instructs Bubble to make a change to the size of the text under the condition that the width is below 768 pixels. Okay, let's create this and then we'll continue to talk about it.

So I'm going to click to "Define another condition" in the Styles tab under Text --> Heading 1. And if I click where it says "When", we have all of these options down here. I'm going to go down to "Current page width", then I'm going to hit the smaller than sign (<), so currently this reads as "When current page width is smaller than". And don't forget: browsers only understand ones and zeros, okay? So your browser is always going to have a width size that it recognizes - it might be 768, but anything below 768, we're going to instruct the text to become smaller, because it's too big for a smaller device.

We want it to have sort of a ratio size to the actual device just so you can read it correctly. Now we have to finish this condition and we're going to choose under "All other breakpoints" --> "Mobile landscape (768 px)". Click. So if I read this from left to right on the Heading 1 text, we have a condition which reads "when current page width is smaller than 768". So that's going to result to a yes / no, or a true / false.

So when it is true (below 768), let's then make a change to the text. I'm going to select this dropdown and I'm going to type in "size" to bring up "Font size", and instead of 72, type in 48. Hit enter. Let's re-read this entire statement: "When current page width is smaller than 768, change the font size to 48 pixels tall."

Okay, let's go across to the "Design" tab, and head across to "Responsive" (I'm going to close my Property Editor) and I'd like you to click on 768. Now, it's not below 768 currently, but that's when the condition exists. So if I just move this handle down very

slightly by a couple of pixels, can see that the text size is changing. And now it's just easier to read. And if I click on 320, look at that. Much, much better.

Last thing we need to do is sort out these buttons. Now let's actually jump into the demo app to see how these buttons change according to the breakpoint. So at 768, they are side by side, there is no change. However, at 375, they are now stacked. Okay, let's take a look. So let's double click on "Group Links", please, and on the left hand side in the Elements Tree, we can see that we have our two link elements. Let's click on link "Browse Jobs" - it's on this link element itself that we're going to apply a condition.

Some of these conditions might seem overwhelming right now. Understandable. I've been through this journey, but through the repeated process of building an end-to-end application, you'll notice that there are only a handful of conditions that we just need to get comfortable with, and I'm going to show you another one. And we will be using this condition in many other parts of this build.

We're going to "Define another condition", this time on the element, not in the Styles tab. We're going to type "page" to filter down the options, find "Current page width", going to choose the smaller than sign (<), and we're going to follow our system that we're building (we won't assign a random width here) and choose the width that we have been using. If I type 768, Bubble will now filter down to the "Mobile Landscape" breakpoint. Click that.

So it's turned blue, which means that this expression makes sense: "When current page width is smaller than 768". What do we want to happen? Now we're going to do something a little bit different. I'd like you to type in the word min: m-i-n, and this condition is going to be called a min width condition. We're going to change pixels to percent and we're going to type 100.

So currently "Group Links" is set to a row container. Now, conditionally, we cannot change a Row to a Column, so we have to find another way for these buttons to change and stack on top of each other at a mobile site. So what we're going to do is this: we are going to instruct this button below 768 px to span 100% of its available space of the container. Therefore, it's actually going to push the next link beneath it, and it's going to appear like it is in a column container. And by the way, these two concepts that we've just covered - the first one being change the size of the text below a certain width, this one being the min width 100% - these are two of four or five that we'll be using throughout the app. And that's it, that's all. So we're getting practice.

Okay, now to save ourselves some time, I'm going to right-click on "Browse jobs" and I'm going to click "Copy special" --> "Copy conditional expressions". This is the power of Bubble: we can just copy and paste stuff. This is actually good practice because we might make mistakes if we keep writing this expression from beginning to end manually each time. It's good to style a button, set its behavior and then just copy and paste across. Then I'm going to right-click on "Get started", click "Paste special" --> "Paste conditional expressions", and voila, here we go. It's pasted that across and that saved us some time.

Now, we're not quite finished, but I do want to show you the behavior before we finish up. So I'm on 768 in the "Responsive tab", and now if I click 320, we have the desired behavior of 100% width, but there's no space between these buttons, so we need to also apply some gap spacing.

Back on the UI Builder tab, I'm going to double-click "Group Links", going to head over to the Layout tab, and we can see that currently we have 12 pixels between these two link elements. I'm also going to add 12 on top on the row gap, so when it changes and stacks we also want 12. Back on the Responsive tab, now we have this spacing.

This is the last thing we'll do before we finish up because this has been one of the more

difficult lessons. I've thrown you in the deep end here but we are learning concepts and we're going to be learning through repetition. What I'd like to do guys, is this 320 mobile phone width isn't really used in the world anymore. This is like the iPhone SE version one and two. The percentage of people using this phone now is micro, so the adopted designer width is now 375. We're going to change this breakpoint from 320 to 375, just to make it slightly more realistic. 320 is not necessary anymore. I'm going to click on these three dots, I'm going to click "Edit" and I'm going to type 375 and hit enter.

Okay, that concludes this lesson - slightly more difficult lesson - that's okay, when we come back we're going to continue on the design. I'll see you then!