Welcome back to the longest series on Earth. Just kidding, sort of uh we're gonna finish up our responsiveness here. We have our three smallest breakpoints. So we're gonna go ahead and get started with those um what we want here. So are we want to we're gonna be going down to um Start at 7:10. You can see it's going over top of the skills there and It's going to go all the way down to 680. So let's Put that at like 6 80. Yes, 681. So what we want is we want to actually put this down now. So for that we're gonna take the skills container there and we're going to give it a margin The top of let's say 200 pixels. Perfect. But we're having an issue with the container size because some of the absolute positioning, so the skills section actually can get a height added to it. And I'm going to break one of my cardinal rules of using IEDs because we're only gonna be using it for this And we are going to make a minimum height of 400 pixels so that it will actually contain that. Their um the other thing that I want to do is actually, you know what, I think that that looks good as it is so that's going to be all we really need to do for this specific sized breakpoint there. But now we're getting into under 680 pixels. So let's show you back at 681 so you can see we are cutting it close um Maybe Let's do our Avatar at 7:10. Yeah let's drop our avatar down to size avatar Let's say what is to 80 pixels? We want to be a little bit smaller that you know work or it's recurrent avatar. Oh I'm cutting on the on screen because my brain completely shut down. Perfect. Let's try that again. But where we're actually supposed to be doing stuff so it's like why is this not working? Uh What? Uh 200 pixels? Well that's too small now isn't it? So what was it before? 300 Avatar was 400 pixels. Oh yeah so we just wanted to be like 380. Perfect. So then Now 6 80, it's not sitting directly on top of it doesn't look as terrible, we could make it a little bit smaller but we're gonna leave it like that for now. Now what we're gonna do is actually just get rid of the avatar completely in our mobile view. So here we're just going to immediately do an avatar uh display run that's gone. Now we are going to adjust our about text because it's way too low. So let's do our about fixed. Um We're going to change it so that the padding on the top is a lot smaller. 20 pixels. Nice. Um and we want the with to be 100 Max width, 100 awesome. And that paddocks before over so let's do padding left and override it to have absolutely nothing there so it takes up a full screen. Beautiful so that will be the end of us fiddling with the about section there which is awesome. Um Our headers starting to have too much padding again I think it's a bit big so let's go ahead and say responsive heading. Mhm And we will say Adding on the top, it's going to be 50 pixels now see how this looks bigger. Uh You know what let's see what happens if we remove it completely looks better here but work needs more heading now. Our work needs a little bit more so let's do yeah we're heading heading cops 15 pixels. This one is way too big. Wonder what's causing that and the about section so the about container let's knock down. Yeah margin Top 110. No thank you. So we'll do about our gen pop I believe that souls race and then for our smallest size we want to change our text of a lot smaller. That's due. Maybe we do the type is going out the window. What the text. Of course I'm not down to the right side yet. Um I want to take the padding off of this for our bigger one. So let's do main header. Nice. Um Our arrow looks terrible though so okay, how far over we currently are Left. Really thought we already corrected that. Oh we didn't need to. Okay so me and arrow um Let's just do left of 60. Okay better. Um Oh something I want to fix is right now we have our nav to be responsive mobili. Um We don't really need that because we don't have a lot in there so I'm actually going to just take out the entire toggle here including the bar in the nav bar collapse as well as this is going to be the most important. Perfect. Um I do need this to say yeah I need they pick out because it's something that was okay all right let's move this down a little bit lower so that's good for our now far there. Um For the arrow Let's say top 100 pixels is what happens. Oh wow that workout weirdly. Well okay that was a really lucky guess. Um This is not working out though. When did that go? Loopy. 5 60. Yeah 5 60. So we need to change this at the 71 here. 7 10 We need our we're gonna change our small show actually now let's go look at this for a sec. So where are these buttons responsive text. Let's give this a new class that says um flex small. Where are naming system has gone out the window. That's terrible. I can't I can't but I mean the neatness. Um Let's say flex just flex. Webster hall flex flip. I changed for something else. What did I change the flex flip for earlier and I call it flex flip. I'm losing my mind flip flex. Yeah that's that's something I would do for sure like thanks. So let's just try adding that and because that should fix this issue for us flip. I don't know why I said that the flex that feels so backwards to me. Well that's something the correct thing there but flip flex. Yeah I feel like you're not actually doing that at all but why? That's what I would like to know because if you do maybe it doesn't have a display of flex that's probably why where are we here? Mhm. Okay here we go. Um And let's dream an M. B. Be on all of these three is to be to be listed too perfect. Mhm. Okay so the problem with using flip flex is I'm gonna add in a where is that again? Why do I keep losing everything? I'm gonna do dash dash buttons and we are going to copy this and we're going to move it down to the 7 10 because we don't want it to be that yet is too high so dash dash buttons. Beautiful, awesome. Perfect. Okay so now what do we have left here? Um I think our logo start to get so we need to let's do this. It's smaller so. Okay good Text. We've probably done the 18 pixels there which is looking good so you can see that change when it drops down there. Um Let's drop those logos a little bit because if we do something like a phone right now they're going to be really off the screen. So let's drop those logos And we're gonna do a width of 32 pixels and a height of 32 pixels. Nice. So those are a little bit smaller. Um We're gonna drop our nap text down as well and we'll do a font size of 20 pencils awesome. And that arrow is looking a little a little *** isn't it? So we're going to yeah let's do a model for here. So everything's looking pretty decent as far as this context. A bit too big. So let's change the um responsive heading font size again and let's change it to font size. 100 pixels. Beautiful. Ah That's having a massive again about container having his emergence super vague about Kant margin Pop 20 pixels always with the dual things. Yeah that's much better there. Um I'll allow it that it looks good on this screen. That's not that bad. It would be nice to have them all be more even um Maybe if I change this one back to 30 And the work when we need to be a little bit long girl. So let's try that. Let's try changing this to 30. She was more similar and the work one. Mhm I think uh let's do a heading Up of 100 pixels. Excuse me. What about margin? Oh that's way too big. I was try 60 looks closer, right, everything else? Yeah I said so um and then just that really massive arrow um so let's change that may narrow And we'll do a whip of 200 pixels and height of auto again through that sitting And let's just make that a little lower. Let's try 80 pix oh and it was the last time it was 100 rights. 100 and 120. Okay so now we can change is responsive and everything is looking pretty good. It's all allowing for space. It is annoying that the front is this care but it's just a longer text is not a lot that we can do but like I said honestly if you wanted something super responsive this probably wasn't the best thing to go with um lesson learned in hindsight but we made it responsive to the best of the order for now. So um in the next video we'll leave a couple more things we're going to do. Honestly you could, you just could just connect it and then end here um we are going to make um the connectivity and fix the auto scroll to the I frame so that every time the real at the page it doesn't do that and then um we're just gonna add it a couple loading animations um when things are loaded so that like headers come in and stuff like that just to flare it up an extra little bit so um those will be our last couple videos, um so stay tuned for those.