3.2 Set Up the 768px Breakpoint

Hi, and welcome back to build a one page website with Froont, no coding required. So far, we've finished building out the default layout for our site. And we made the one small adjustment that was necessary to ensure that the layout is still good, at a width between 1024 and 768 pixels. In this lesson, we're going to be setting out the 768 pixel break point, so that it looks good as well. Now the first thing you can see is broken here, is there's now no longer enough width for the title and the image to sit on the same plane as each other. So what we're gonna do is stack the title on top of the image, so we're gonna need to make some adjustments in order to do that. The first thing that we're gonna need to do is get rid of the floating that would apply to each of these. So we're going to go down into the Advanced section and change this from Float left to Float none. And we need to do the same thing for our image, if I can select it. This is an example of one of those times where it can be easier to just directly select a component from the widget tree. So, we're going to change that Float to none as well. We can't see this right now, but don't worry, we're about to correct that, so now let's go ahead and make some modifications to our title. We no longer need it to have this high line height anymore, because we're not going to be trying to vertically center it. So we can change that line height back down to 1.2, so now that's decided to make a bit more space for our flower. Now, our header, right now, is set to a fixed height of 22rem, so just make sure that the header is selected here. What we want it to do now is to be flexible in height so that it will always fit both the title and the flowers in here. So we're just going to change this to the word, auto, so now we can see everything that we have in our header. So we want our content inside our header to be centered. So we've got to go down here into the Advanced section, and we're going to change the Text align property to center. So that centered our title. It hasn't automatically centered our image. And in order to make it do so, what we need to do is tell the image to behave like it's text as well. We do that selecting the image, going to its Advanced section and then in Display, we're going to change this to inline block. Now what we need to do is just fix up this spacing that we have above and below our image. So I'm going to go up to the Margins section, we no longer need a 2rem margin at the top anymore. There's enough space around the text without needing any margin here at all, so that's going to be changed to 0. And once again, you see how that's gone purple to correspond with our 768 purple colored break point. And we also don't need quite so much space below this image anymore, so we're going to reduce that to 1rem. Now there's still just a little bit too much space around the title. And that's because it's still inheriting the margins from our widest break point, so we're going to change that up as well. We don't need any margin below the title so you can see there that gives a much nicer amount of space between those two. All right, so that has our header looking all good now, let's just scan through and see what else needs to be adjusted here. The first thing that I can see that looks a little off is, because we've shrunk down the width now. This spacing here is considerably wider than this spacing here, so let's go into the Padding for this area here. And we're just going to reduce it down to half the amount, so we'll go from 2rem to 1rem. Both above and below. So that it now looks a lot more even, a lot more well balanced. And now that we're starting to shrink this spacing here, this gap here looks a little bit too wide as well. So we'll select here. And now we're going to reduce again by half, we're going to take that from 4rem down to 2rem at the top and also at the bottom. So now we'll keep scrolling through, this is basically how you do responsive functionality. At each size, you just go through and you check to see what doesn't look right. So the next thing that doesn't look right is these two pieces of information are too close together. It's too hard to tell that this is separate, so we're going to need some more space here, so let's have a look in our inspector here. We'll actually select this first container, so that's this one here. So you should be able to see the highlight around the first piece of content here. And then we're just going to add some padding to the bottom of this container, we'll just set that to 4rem. So now we've got an amount of space in here that is about the same as the space in here. So we're going to need to do the same thing that we've done here also in between these two. So again, we'll just select this text so that we can have a look in our widget tree here. And then this is our text that we've just selected, will go up, to select the container that wraps it, and then the same thing again. We're just going to add a bottom padding of 4rem. All right, so now that's all looking consistently spaced, the subscription box is still fine. The only thing now is we've just got a gap here that is a little bit too large. So once again, we need to select the appropriate container, so we'll look for our subscription box over here. We'll go into our Margins, and replace the existing bottom margin of 4rems with a new value of 2rem. All right, so that is everything we need for the 768 break point, so we'll actually just go into full mode. We'll go into Preview, and you can see everything is shrinking down nicely as we progress through these sizes. And we'll just go back to the full break point. And once again we'll use the developed tools to double check that everything is flowing correctly. So yep, that's all good. I'm just having a look a little further down. Yep, everything is going just fine at the break points that we've set up so far. You'll notice here that these columns are collapsing down automatically, and I've neglected to mention earlier. That's because this is some functionality that's automatically handled by these in-built components. So that's the reason why these are collapsing down to a single column without you having to do anything. Unlike when we wanted to change these two here to stack on top of each other. All right, so now that's our first three break points taken care of, and we only have two more to go. The 480 break point and the 320 break point. And we are going to go through and make the final adjustments for our responsiveness to those two break points in the next lesson. I'll see you there.