3.1 Start Making It Responsive

Hey, welcome back to build a one page website with Froont, no coding required. We finished putting together our layout at its default size. Now, we need to start building in responsive functionality so that it's going to work at all sizes. So we're gonna jump into preview mode in Froont. In built, as we mentioned earlier, you have these break points up here that you can use to preview what your site is gonna look like at these various sizes. So you can see that as we're shrinking down, the site is looking worse and worse. So we're gonna need to adjust the layout at each one of these points. Now, even though this breakpoint bar is very handy, and it does give you pretty cool way to add in responsive functionality, there's another step you should also take to make sure that everything is gonna be just right with your site. And that is to use the developer tools in whatever browser you are using. So I am in Chrome right now. I can open up the developer tools by going to More tools, Developer tools, the shortcut is CTRL + SHIFT + I. And now I have a little icon here that lets me simulate different types of view ports. So if I click that. Now, I can choose from a bunch of different display window sizes, but I can also smoothly resize. To get a look at more than just these break points, because what you can find is that you might have you site looking great at 1024 pixels wide and at 768 pixels wide. But there might be a point that's just a little bit wider than this break point, at which it's not looking right at all. So while you do definitely need to look at each one of these widths, I also recommend jumping into this mode, and doing a smooth resize to make sure that the places between the break points look right as well. So we jump out of that for now, and go back into the normal Froont mode. Now, another thing that I want to show you quickly about how this break point system works is the color coding. So if we select our title here, you can see that there are a bunch of settings here that are in yellow. And you might notice that if we hover over this full-width break point, the bar goes yellow. Now, what that's telling us is that these values here are designed to apply under this break point at this full width. Now, if we hover over a smaller width, now you can see it turns pink. So I'm gonna add in a small change to the layout that kicks in at 1024 pixels wide, and I'll show you how this color coding works. So to shrink this site down to 1024, I'm just gonna click here on the bar. Now, the only thing we need to change for our layout here, everything's still looking pretty good. But we are going to need to reduce the size of the text a little bit. Now, you might not think that this is necessary, because it looks fine here. But this text is just a little bit too big when we get to about here in this media query. So we're gonna shrink this title text down so that it's small enough to look good. Not just at 1024 pixels wide, but also around here just before we get into that 768 pixel break point. So I'm gonna double click our text, go into the topography area here. And you can see that normally, this text would be six rim. Actually, I'll just go back into the yellow break point first. There, now you can see that the text size is yellow, showing us that it corresponds with the full width yellow coded break point. Now, we'll change that down to 1024. Now, it's showing us the site value, but it's white. And what that's telling us is that there is a value on a break point that's wider than the one we're looking at right now that's being inherited. So if you wanna do something different in this setting, it's gonna be overriding that value from the wider break point. So what we're going to do is change that font size down to five rim. Now, watch when I click into this field. Now, the number has turned to pinky purpley. And that corresponds with this color here. So that's telling us that now, if we add a value into this field, it's gonna be triggered at this width, this 1024 pink-colored width. So let's drop that down to five rim. So now we've shrunk our text down. This text is going to be fine all the way along this break point here. But if we go back up to the yellow, Then you'll see that we have now these color coded sets of values. So as you go through a design, when you see these different color codes, so each of these different break points has a different color, you'll be able to tell where a certain value is coming from. And the thing to remember here is that if there is a setting from a wider break point, then it's gonna take precedence unless you explicitly put a new setting in at a smaller break point. So that is all that we needed to do for the 1024 break point. So we're just gonna check on that also by bringing up those developer tools again. Now, you'll see as I shrink this down, there we go, that's the 1024 break point, and that's fine. If we watch this line here, that's the line at which the 768 break point is gonna kick in. So this needs to look fine all the way up until we shrink down to that spot. And it does, so that is all good to go and now we're ready to move on to working on the rest of the break points. So in the next lesson, we're gonna go through and make the adjustments that are necessary to enable the 768 break point to look good all the way through the site as well. We're gonna do that in the next lesson. I'll see you there.