Welcome back to our portfolio series. Um This cast, we're going to go over some responsiveness um there's just a couple of things I just want to touch on before we get there and if we're really wanting to work with a responsive portfolio and have it be really mobile friendly, This is not the design we want to do. I really wanted to focus on a design um that worked for a web portfolio um but that being said it's just not conducive to being as nice as it could be mobile for mobile view, so we're going to turn it responsive to the best of our ability and it will look it looks decent. But the more I work on this, the more I learned about what I would redo when designing something um which is a great learning experience for me and hopefully you're noticing the same things along the way. Um So this is yeah, this was my first experience going from designing something myself to building it out. So I think I've learned a lot about what I would redo responsibly, but that being said we're not going to completely abandon the project, we will continue on and do our best to make it responsive. So I have gone ahead and you can see it's shrinking down so the top ones being responsive in that section there for the skills section goes there pops down for the work section which is long, we're dropping those, Oh I forgot to add the buttons back underneath but we're gonna add our buttons back underneath, so it's just showing that without extra fancy stuff. And for the about section we are doing it like that and then for the contact or flipping it so it's centered there so that's how it's going to look. So we said well close this one down and we will open up our actual project and we will get started with actually building this out now. So this one is not responsive as we're seeing still a mess. Silver kind of one section at a time here. This might be two parts of hoping to get one but we will see how it goes. So let's go over to our code and I have already kind of figured out the responsive break points um for this design with how we've set it up. So I'm gonna go ahead and just add in those media queries here. Um We do want to go from largest down to smallest. So we're going to do a media screen screen and we're going to have our max width, the 1300 pixels Which I realize is starting quite large but this green is very wide. We coded in about the 1900 there um but so there's just a couple of minor tweaks we're gonna be doing at the larger size. Um let's go ahead and copy that again. We're going to do one for 1100 and 80 pixels as well as one for yeah 940 pixels 710 pixels 180 pixels And then our smallest one is gonna be 490. Um this is a lot of breakpoints. I do realize that again it's because it's just not conducive to being um super responsive based off of the design that I did and that was absolutely my mistake. So that's something that I will now know for the future. Um But one of the biggest things we're gonna notice right away is gonna be, our heading sizes are going to be too big when we immediately start to get smaller. Um We're going to start to just look really really giant. Get in the way of things as well as our avatar is gonna start to get in the way of things. So we're gonna do is right now our avatar if we look. So our avatar sitting here my blind, There we go. We're sitting at 600. So we're actually just going to do a simple change right away to 500 And we're going to do a width of 500 pixels so that's not going to require too much of a change there. Um I did go I do want to actually change, we decided that the distance of this text for the About text was gonna be I think we did 70% and we had debated doing it for 60. I am going to actually change it back to 60 because I think it will just work a lot better responsibly even though it would look a little bit better, wider at the biggest value. Um it just, it ends up working better responsibly when it's a little bit smaller as we can see. So we're going to keep it is that you'll see where that drops down there and now we want all these headings to drop down. So because I use unique classes for each of them instead of separating out the heading into the main one responsibly. We're going to create a new heading that we're going to add on to all of them call and I'm going to call it like responsive heading but I'm just going to shorten it to rest heading. So let's go ahead and find our first one which is going to be we are now far there. Um Let's see here, not this one. Ah Where's the skills? Skills is going to be our first one here so we're gonna do rest heading and the same thing to work Yeah, yeah. Out and contact which is going to be our former and headings there. We will be making these smaller as time goes on. So for now I think our starting point on any of our headings is yeah 300. We're going to knock it down to 250. Perfect. And now we can see that it will grow and then just shrink down a little bit but it does look better for the about section specifically looks a lot better and lets us go further there before the next break point. So let's continue on, we're going to go down to the next smaller breakpoint Which is going to be our 1180 here. Um The headings are gonna knock down one more size for this one. Yeah, We're gonna do a font size of 200 by one more size, I'm just gonna kind of decreasing them by 50 each time. So when we get small enough here okay, there we go. So it knocks it down. You can see those two different breakpoints there. We are also going to now add one for our text because our text is starting to look a little large because it's sitting at that 32. So everywhere we kind of have that main text, we're going to add in a similar class to what we did for the headings. So we're gonna add in a responsive text class. Let's go and find those. Here. We are going to do it for this one here. Responsive ext we're going to add it for all of our skills and we're going to add it for our boat. Oh and we all need to do it for the email as well. Yeah. Perfect. So now we will go over here and we're going to add in a responsive text And why don't we change it 2015-32. Let's do 24 haunt size four pixels. Yeah, Perfect. Little smaller. Oh I want to add in a bottom margin underneath that there. Um So let's go find where that is. That is my here. Let's do it and be three. See how that looks. Try four looks better in my opinion. So go with that now. Yeah we need to. Okay so let's keep going down and see what it's affected next. So this here our trivia and stuff is going to start to get in the way. Um Oh this one is not responding so I must have put it on the wrong spot or spelled it wrong. Let me see here. Skills. Yeah I did I spelled it incorrectly. This was getting in the way of the work. We're actually just going to hop it up and move it over a little bit before our other breakpoint. So what we're gonna do is both of those things are actually getting in the way. Mhm. What's we out here? Yeah we're still quite large. Okay so let's see here um we're going to have an issue with all of those. I need to knock those down there. Uh huh. Okay so let's do we'll do a marker responsive in here. Yeah yeah marker response. We're gonna move it over both of these. We're gonna move over let's say left 2 80 pixels and let me go back over here and let's find them. So let's do marker response response. Okay so those ones didn't move over which is great. Um But we need to obviously move this one up because it's not looking good in that position. Um So this is trivia text I believe is what this one is the attribute text. So we'll do whoops. Yeah these are supposed to be down here not that one it's better. So trivia text is going to go up We'll see where tribute text is sitting as far as our top because we don't have anything for top, it's going to be negative so it's negative. 40 excels Yeah that looks better there, we see where we're at as far as our turn this off. Um This needs to be a little bit smaller I think the firm potato with 60. Uh I just need to move this down a little bit so we need this to go underneath. The other things that it doesn't override it there. So what we're gonna do is we're going to add in a class to shove this down underneath so we're going to find that um that one will go probably here you think we'll do responsive positioning. We'll try here because this is the right spot we want to do is we want to at a massive basically margin to it there so we're going to do responsive positioning and let's add in like a mhm. Try like 300 pixels. Mhm. Yeah perfect so now this one will go across I think we don't need to go quite 300 pixels. Maybe we'll do like to 80- 63- 60. It low 60. That's better. So all those are working in conjunction with each other which is great and you can see that this is basically where the avatar gets too close. So that's what we've created our next break point which is at the 9 40 mark. So now we're going to drop down into that. So what we're gonna do is we're going to affect our avatar again. Um We are going to change the weights down another 100 so we're gonna change it down to 400 pixels Air and then it's going to look a little bit too high I suppose it doesn't really look that high does it? Probably just leave it there. Yeah you should be able to leave it there but we don't need to change is heading down other side so we're going to do as per before we're going to change the responsive heading Mhm. Two. But on another 50 We're going to 150 pixels make that smaller so able to move that over there and then you can see we're starting to get some issues over here. Yeah so we are going to change now getting rid of these extra buttons so we're gonna knock all of these that way and for this we're going to create a small hide. Class. She's a slight to none. We're gonna go ahead and we're gonna add that display none too. Okay so the small hide will need to go here. But let me do this. We're gonna have an issue with our justify competition between there. So for kind of a hacky fix I wouldn't I'm just going to add an extra dev um so that you'll see basically if we didn't add that in this would go over too far so copy that out. It shoots it to the other side because it needs something to justify it against with our flex there. Um This is way too low now but we also need to hide this one. So let's go back and find yeah. Uh not this because the ice cream will do this so small. Yeah. Yeah I Perfect. How's our 9 40 then what's our next we're gonna be 7 10 I think. Let's check. Yeah. So where do we have here? 7 10. Okay. So I think I want to drop this down because it's just looking a little not amazing as we continue to go on. So I'd like this to go wider and just keep this as it is here. So what we're gonna do is we're going to change the avatar up so we'll do a top of Yeah negative sorry, comes up a little bit and then we're going to add in the about heading. I'm not about hitting about text and we're going to give that a padding at the top. Let's say 100 pixels and see how that goes. Shoot it under the thing. Not quite. Let's say That would be a great over shooting. Let's say 140 pixels. And then we're going to give it a width of 90%. Why is this not working? Oh, because the response texas underneath it. Of course. Um Oh no, it's not Photo text padding top. 40 pixels. Oh you know what? It's max width. That's why that's what's there um negative 60. Little bit higher. I would like that a little bit. You know, keep it like that for now. Um We need the work heading to be fixed there. So let's do Yeah, give it up. Sorry Friday's uh given a 40 pixel string. Drop it down a little bit. Let's do a little bit more. Let's do 60. Perfect. And now this container. So for the I frame container, we're going to do Wix Of 100%. Mm hmm. Make it super wide. And so we need to change that pattern. Like we talked about in how many videos ago, padding top. Huh. And we're going to change it to 60% right now. It's I think 40 or 30. Perfect. So it is looking better. So what's causing this to take up. Mhm. So the responsive positioning margin is massive right now. So we need to override that. We added this in here for dropping it below Now. We need to fix that. We're going to make that. Let's say really small. Like a clean pixel that's looking better. What are we sitting at with here. Well, container margins looking really big for that. I don't want it to be that high. So let's do oh yeah. Uh do 20 pixels as well. Oh okay definitely not say 1 10. Yeah. Okay. So that all seems to be working a little bit better there. Um but we're getting a little close for these so we need to go down to seven 10 and you can see how close they're getting. So we're actually going to flip the direction of those now. Um So let's go ahead and add a new class. End two Down to the contact. So justify content between we're going to say flip X. This is stuff you can do with Bootstrap but because we're not using set foot struck classes, I'm just going to write them out. Um We've already blown past the point of doing in a sensible way. So let's just continue on with it. Uh Let's say flip flex and we're gonna say uh flex direction is going to be column and then we're gonna say a line items, it's gonna be center perfect. We just need to add a margin to the top one on the bottom. Let's do it. Maybe three should be good there perfect and the margin shouldn't affect anything here. Those are still lined up so that's great, awesome. So that's looking fine there. Um Yeah, let's see 700. We need to get down to 7:10 Since you like make sure 7 12. See what else is weird. Okay, so we're gonna just arrow I suppose the arrows looking okay, it's a little big but it's okay. I do want to move this over, it just looks a little, all this looks a little too big for me right now. So what we're gonna do is we're gonna go ahead and these were our main classes. This is why we didn't think similarly so that we knew what we were working off of when um when you're doing this, you know what the classes are instinctively when you're naming them all the same thing. So our font size was really large um what was it? 90s? Let's try it out like a 60. Yeah, that's looking nicer for this size definitely. I'm going to go ahead and do this main para and I'm going to move the padding over. Uh huh. Perfect. And now let's just make that arrow a little bit smaller. So what are we working with here? This is for 62 x 497 roughly? Well that doesn't, that's definitely not what we've put in. Let's find it 400 x 300. So let's change the width. 300. Okay. Yeah and let's just change that height. The auto to make it not look so weird. Perfect. Was a little high um let's say do we have a previously set top here, preserve our arrows. No top at the moment. Okay, so let's maybe drop the top down a tiny little bit. Let's say top of 20 pixels. Mm hmm. It's not worth it fiddling with it that much. We'll just keep it there for now and adjusted on the smaller ones. So that is going to be our 9:40, which is gonna be the one that we needed to do. Probably pretty much the most on um to get it to make sense. Um What we do need to do is we need to add our buttons vacuum now. So what I'm going to do here is I'm actually just going to make a mobile class. So let's find our buttons all together. So this is our I frame, I'm going to go below the I frame. Let's give and I'm gonna give it a class of roble you Actually. This wasn't a small hides. Like the small shows. Keep this kind of sensible here and I'm gonna take the buttons, just the violence and we're gonna copy of the buttons over. Mhm mm hmm. And we're going to say we're just going to change this tutorial because it's really long. We're gonna do a D flex. So what we're looking right here, where are we for all over the place? That's because we need to changed these. Mm mhm Well, right. The new button. Uh huh. Okay. So that is sitting in the wrong spot. So let's go ahead and drop this underneath. What did I just do? Memorials, I broke something with. Yeah I got rid of the end. Okay so those are sitting underneath which is great. So let's go ahead and add in a heading We'll say each three, check out more of my work here. Some more work here. Mhm. Actually I would like this to be inside of here so this will just wrap these in another def because we often use enough gives in this project. We could definitely have to use a couple more. Um Okay so now what we're gonna do is we're gonna do a flex oh my gosh I can I call them yep. And we're gonna do because we switched directions we're gonna do a line, don't send her I'm gonna do a margin at the top of the floor. Perfect. We're gonna do because that will it just change. Not that um Perfect. That's kind of a hacky solution. We should rewrite around class for that but I'm going to be terrible and not do that at the moment. Um And I do an M. B. Two here to add a little bit of distance between them that seemed to do nothing. Let's try larger. Who big? Let's do three. That's better. Um Are buttons are looking too big for my liking? Um Let's say responsive text here and see if it drops down in size. It does not if I could make it bigger. Okay so we're gonna have to rewrite some button information there. Um Yeah my padding is too big for my liking. So now we're gonna go these are only buttons currently on the screen. Right? Yes Weight centered. Yes it is. Okay so then let's go into Styles. Where are we here? This is perhaps well hided. Yeah so we want to go up here at the very top. Well you do the bottom two before so right now it's gonna show up but it's gonna show up always. So let's do a small show needs to be a display of none. And then where we flip the show hide off to display of none. We want small show to be a display and I'm pretty sure you want to be flex now we make it bigger a little show. Mhm. See what I did here that's why I'm saying what kind of display it is afterwards so we can't do that. Um And I'm pretty sure the deflects has an important so I'm going to have to override this one. Um by doing this means that expression markers in front of me. Yeah so now it should be completely gone and then when those go away. Oh So those four ways of course I need to add in important again mm Here we go. So simple enough. Um buttons are bothering me though. So let's change the buttons here um we're gonna gonna change the padding To be eight pixels and 16 pixels. Perfect. And then we're also going to say margin right is going to be 12 pixels. Does it look center to me? Does alexander? Do you guys? Oh yeah I suppose it is. Wait yeah I think it's because this one's bigger. I'm gonna put the trivia game one in the middle because otherwise it's going to annoy me. That looks uneven. Yeah that just looks better mentally there. Um But the one thing to note is these are not surrounded by um we just say click these are buttons here. Um We are going to have to we'll fix that in the hooking up once because currently these are not clickable because I forgot to add something to it there. Uh This still bothering me a little bit but they've got just I'm just gonna leave it it's fine. Okay so now we're going to go onto the smaller screen size. How much time are we at here? 35 minutes. Okay we're gonna stop this and we're gonna finish up the responsive in a new video