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.

Hero container

I've added in a group below my navigation and let's call this hero and I'm going to align it to the middle of my page and make this into... when I'm building with the new response engine and something that I encourage people to do is, I'd say 90% of the time use rows or columns. That is the bare basics. That kind of the core of CSS. 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 out where your elements are going to go when your screen shrinks down.

But in this instance, we're going to use aligned parent because I want my content of my hero to be right in the middle. Let's make my hero section a fixed height.

Adding text

Then let's add in some text. Let's just give it a little bit more styling. 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. Let's have it as layout will have max width 100%, so it can't get any bigger than the container, the page element that it's in and we'll just check that should.

Debugging

No, I made a slight mistake there. Let's just go and fix it 100%. Okay, that's still not working. What have I done wrong? There you see building a bubble, constantly learning you just kind of have to click around and till you get what you want.

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 anyway. So if I'm going to put this back to align to parent and then align in the middle. Now using align to parent, if I place another text element here, align to the centre, I'm going to get this nasty overlapping effect.

So how do I get around that?

Using groups

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. Make that column with 100 and then let's place this in the middle.

This has got a min height. There we go. Get rid of that. Sometimes when you're working with the responsive engine, it is just finding where there is a value that you don't really want there to be a value.

You saw that it just all snapped into place and we found it. Let's preview that and let's have a look at how that is responsive.

Troubleshoot

So we still got an issue with something in here. 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 run to go. It's about finding no, it's not that. It's about finding the missing values.

Add a button

Right. What do we want to look at? Okay, let's put a button in. 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. 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. 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.

Header

So that's our header in place and let's have a look at columns now. 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.

For columns so we have our hero section here and there we go. Just move myself over to the right. We've got navigation and we've got hero section.

Column layout

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 because it's going to contain two columns in it.

This will also be our page width. We get rid of that min value because that might frustrate us later. Align it to the middle and then 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 I'll give it a little bit of height so it's easier to see. Here we go. And then let's have a look at it in our elements tree. I'll name this columns.

Let's call this left bad spelling there, and so, left if I copy and then go into columns and hit paste, I now end up with two columns. 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 am going to apply a little bit of styling so they're easier to see.

Column padding

But let's make it really easy. Let's apply a red to that one and a green to this one and then preview two equally sized 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 hit tab there and we'll just add a header in there so that it's got a little bit of content.

Responsive columns

Let's have a look how that behaves responsively. 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 begin to lose parts.

With responsive web design, there comes a point where you want to stop it from shrinking and you'd like them to end up on top of each other or stack. So let's have a look at that. 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 990, we want our columns to stack. So we can do that by setting a conditional statement. Can we do that in here? Yes, we can do it. So in the response editor or in the UI builder, you can do it.

Conditional statements

We can say page width is less than just to be a little bit careful here. I'm not placing a min width value in there. I could place a minimum value in there of half of 992, but that would mean there 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%. I can right click on there and I can go on to the other one and right click and then hopefully there we go.

They pop on top of each other. Let's do a little bit of styling to make that look nicer. We take our column and let's get rid of that nasty background as an illustration. And let's put a border in there and a little bit of a curve to it. I don't think that should be white that needs to be a dark grey, really sharp. The same here. 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. Because I'm using a 20 pixel margin elsewhere in my app, I will use a 20 pixel margin here.

Column gap

So I'm going to select my columns. Actually, instead of applying as a margin or padding, I can apply as a gap. And if I apply 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 the full width, it also includes that gap in there. We have now a responsive column layout which stacks and adapts. No matter how wide or how small the page is.

We're making good progress on the responsive side of things. 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.

Responsive text size

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. 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.