3.3 Set Up the 480px and 320px Breakpoints

Hi, and welcome back to build a one page website with Froont, no coding required. We've been going through and adding in responsive functionality to our layout. We've done the 1024 media query, and the 768 media query, now we just need to wrap it up by sorting out for 80 media query and the 320 media query. So let's go into Edit mode and get those together. And the first thing that we're gonna need to do is reduce the size of this title. Now, even though this fits at this media query I'll just show you the problem, the reason that we still need to reduce it in size. We're gonna open up the Developer tools and we're gonna shrink this down, sorry. There is our 480 media query, but as we shrink down there, see now we're starting to push the extra letters off on to a new line. We're still inside the 480 media query, but the text is too big. So that's just another example of why you do need to test in between the break points as well. So we'll go into our 480 media query and Edit mode. Select our text. Go into our type topography and we're gonna change the font size to 4 Rrem. We also want to shrink down this image a little bit so it doesn't take up so much space. We can actually do this just by dragging up, if we like. So that's probably pretty good as is. Now if we scroll down, we've got the same problem here that we had with the content here where there wasn't enough space to distinguish one feature from the next. So we're gonna need to grab the container that surrounds this first feature, and we'll find that in the WIDGET TREE here. So we'll select that and then in the Padding we're gonna set the padding at the bottom here to 3 rem. Then we're gonna need to do that down here as well, so we'll select the next container and we'll do the same thing. Bottom Padding to 3 rem, and other than that, everything else in this media query is looking just fine. So there's nothing else that we need to adjust for the 480 media query. So now let's drop down to the 320 media query. And you can see, once again, the text here is too large. You can see we've actually go some spacing that we have carrying over from before when we had a 2 rem margin on the outside. We're actually going to fix that up at the 768 breakpoint. So what we're gonna do is we're gonna set the width of our text here to 95%, and then we're gonna set the left and the right margins both to auto. So that's gonna center it properly, and then that will be inherited as we go down the breakpoints. But we still need to go into the typography here. And we're gonna change that font size down to 3 rem. Now we've still got the image here taking up a little bit too much space. So once again we're gonna use these drag handles to reduce the size, we're even gonna use the ones on the side here. Just shrink this image down a little bit. It doesn't need to take up too much space, When we have such a small width on our layout. So now that's all nice and compact. This section is still looking just fine, but now this text here is looking a little bit too big. So, we're gonna double click to edit. Make sure our cursor is inside the header, and then we'll go to the typography section, and we're gonna change this font size down to 2 rem. All right now everything fits in there just fine. And the whole layout is looking all good, this is also fitting in perfectly so is the footer. And so now that is all set so that pretty much wraps up our responsive functionality, so we go into Preview mode. Let's check all of our breakpoints. Everything's looking good, we'll just do the same thing with our Developer tools. So everything is still looking good. We're not having any points in our layout which are broken. Now don't worry too much about going any lower, than 320, if your layout looks fine at this size then practically speaking that's the only size you really have to worry about because there really aren't devices that are smaller than this. So if you're good at 320 then consider that a job done. So now our responsiveness is finished and our whole layout is looking good from top to bottom. And we're gonna do one more thing that is to add a little bit of polish with a couple of animations. FROONT makes it easy for you to add some nice little fade ins to each section in your site. So we're gonna go through and we're gonna add a couple of little fade in animations in the last lesson of the course. So I will see you in the next lesson.