Create a responsive homepage hero section in Bubble

Designing with the New Responsive Engine

Let's move on and demonstrate another way of quickly designing up an element with the new responsive engine. And that will be a hero section. So I've added in a group below my navigation and let's call this hero. And I'm gonna align it to the middle of my page and make this into... So when I'm building with the new responsive engine and something that I encourage people to do is, I'd say 90% of the time use rows or columns. Like that is the bare basics, the kind of the core of CSS. And I think one of the reasons that's so essential is that when you do come to shrinking your app down and making it responsive is that they are like the most predictable ways to work about where your elements are gonna go when your screen shrinks down.

Using Align to Parent for Hero Content

But in this instance, we're gonna use align to parent because I want my content of my hero to be right in the middle. So if I, let's make my hero section a fixed height and then let's add in some text. So... Let's just give it a little bit more styling. Okay, and I'm not going to have it as fixed width because I want it to be responsive. So unless I chose a percentage value, fixed width will mean that when it shrinks down, the text doesn't adapt to the size of the page. So let's have it as... Layout will have max width 100%. So it can't get any bigger than the container, the page element, now it's in.

Troubleshooting Layout Issues

And we'll just check that should... Oh, no, I made a slight mistake there. Let's go with, okay, let's just go with fixed width 100%. Okay. Oh, that's still not working. What have I done wrong there? Yeah, you can see, building with Bubble, constantly learning, you just kind of have to click around and get the, till you get what you want. Maybe the issue is that... Yeah, maybe the issue is that I'm using it in a parent container that is aligned to parent. Let's just swap that out and we'll go for column layout. Okay, right, there's something that I haven't quite got right there.

Aligning Text Elements in the Hero

Anyway, so if I'm going to, we'll put this back to aligned to parent and then align in the middle. Now, using aligned to parent, if I place a text, another text element in here, and align it to the center, I'm going to get this nasty overlapping effect. So how do I get around that? Yeah, so you can see the text is on top of each other. I can group them together and I'm going to group them into a column. And then let's make that column width 100. And then let's place this in the middle. And this has got a min height, there we go. Get rid of that.

Fixing Responsive Issues

So yeah, sometimes when you're working with a response engine, it is just finding where there is a value that you don't really want there to be a value. She saw that it just still snapped into place when we found it. Let's preview that. And let's have a look at how that is responsive. So we've still got an issue with something in here. Is it the width? No. Okay, so I'm going to try, is it this? Here we go. Is the hero width? So that should be set instead to max. There we go. I think that's it. I was just saying where I'm to go. It's about finding, oh no, it's not that. About finding the missing values.

Adding a Call to Action Button

Right, what do we want to look at? Okay, let's put a button. Here we go. Every hero should have a clear call to action. So we'll just get rid of the min height there. Align our button centrally. Let's preview that. Okay, not looking too bad, at least for demo content. And let's have a look at the responsive. Okay, we have still got something min width. There we go. Right, there was a figure remaining from when I've been creating groups, a min width was stopping it from being fully responsive. So that's our header in place.

Creating Responsive Columns

And let's have a look at columns now. And then if we've got time at the end, I will go back and go through how to make each of these different elements responsive. But for columns, so we have our hero section here. And, there we go. Smooth myself over to the right. So we've got navigation and we've got hero section. Now, how would we go about with the new response engine laying out some columns below? Maybe we want to list some features. So let's add in another group. And we're going to make this group into a row, 'cause it's going to contain two columns in it. And so this will also be our page width. We get rid of that min value, 'cause that might frustrate us later. Align it to the middle.

Setting Up Column Layout

And then let's add in, let's put our padding in our columns. So I've got a group and now I want to place two columns into it. And we can take a group and place it inside that group. And this is going to be one of our columns. So it's going to be a column. And then if I remove the width value, and in fact, I'll give it a little bit of height so it's easier to see. There we go. And then let's have a look at it in our elements tree. And then this columns. Okay, so let's call this left. Oh, bad spelling there. And so left, if I copy and then go into columns and hit paste, I now end up with two columns.

Styling Columns for Visibility

And so because I haven't placed any constraints on these columns, they are going to take up the same amount of space. Now, if I start putting elements in there that do have min widths or max widths that begin to constrain it, then they will take effect. But right now I have two columns, which if I label this one right, and then I'm going to apply a little bit of styling so they're easier to see. But let's make it really easy. Let's apply a red to that one. And a green to this one. And then let's hit preview. Okay, two equally sized columns.

Adding Padding and Content to Columns

So what might I do at this stage? Well, I'll put some padding in the columns because I like to have that 20 pixel padding. So importantly on the left and the right. Let's hit tab there. And we'll just add a header in there so that it's got a little bit of content. Okay, let's have a look how that behaves responsibly. So you'll see they stay the same width all the way down until things get ridiculously small and the elements begin to chop and we'll be into these parts.

Implementing Responsive Stacking

So with responsive web design, there'll come a point where you want to stop it from shrinking and you'd like them to end up on top of each other or stacked. So let's have a look at that. So in fact, we'll go back into the responsive editor and we'll say anything below or including a width of 992. In fact, we'll just do it below. Anything below 992, we want our columns to stack. So we can do that by setting a conditional statement. In fact, can we do that in here? Yes, we can do it here. So in the responsive editor or in the UI builder, you can do it. We can say page width is less than 992.

Setting Conditional Statements for Responsive Design

Then you have to be a little bit careful here. So I'm not placing a min width value in there. I could place a min width value in there of half of 992, but that would mean there'd come a point when half of 992 is still greater than the total width of the browser the user's using. So that's not a great approach. Instead, we're going to use a conditional statement and width will say min width is 100%. And I can right click on there and I can go onto the other one and right click and then hopefully, there we go. They pop on top of each other.

Styling Responsive Columns

Let's do a little bit of styling to make that look nicer. We take our column and let's get rid of that nicely background as an illustration and let's put a border in there and a little bit of a curve to it. In fact, I don't think that should be white. That needs to be a dark gray. It's really sharp. Yeah, that's better. The same here. Let's copy that color across. I like being consistent. And let's preview that and we'll notice some things that need tidying up like a gap in between.

Adding Gaps Between Columns

So because I'm using a 20 pixel margin elsewhere in my app, I will use a 20 pixel margin here. So I'm gonna select my columns and actually instead of applying it as a margin or padding, I can apply it as a gap. And if I apply it as a gap of 20 for the row gap and the column gap, then you'll see something rather nice happens here which is that when it goes to a full width, it also includes that gap in there. So we have now a responsive column layout which stacks and adapts no matter how wide or how small the page is.

Refining the Hero Section

We're making good progress on the responsive side of things. So let's work our way back up the app and look at making these other elements responsive starting with our hero because that would be nice and quick. So if we go and preview it, we'll see that at some point, this text becomes a little bit too large. Let's do something about that. So we can edit it and we can say, and the current width values down here as well as having the shortcuts up here, we can say when the screen width gets below, let's say 570, let's change the font size here. So width is, let's go this time, equal to or less than 570 font size. And let's take it down to say 36. And you'll see when it hits 570, well technically 569, it shrinks down.