How to Create a Website - Complete workflow | Part 10: Making it responsive

Key Takeaways

hi everybody and welcome to my in this video we are going to be looking at a few things I'm going to start finally building my media queries and I'm going to be making it work a lot nicer on desktop I was planning on doing one long video but it turned into a really long video so I'm breaking it up into two videos instead in this video the first thing I'm going to do is start building out my grid and I'm going to do that with the sales point section working on my media queries on that and in my grid then I'm going to jump up to the hero area and work on the hero area and with that I'm using some v-min and I think only veeman maybe some Vmax in there as well to get my spacing all right so that was pretty fun so then I finished the whole thing off by taking a look at the promo section down a little bit lower down and that's it for this video Let's jump right into it now so I think with the easiest thing to do is going to be to build out a bit of the grid system to get this thing started because here I have these three columns here which aren't working as three columns and then over here I have this which is going to to be two columns this is not currently on this is only going to appear at larger screen sizes so let's jump in and work on the grid system a little bit and see if we can't get it uh looking a little bit better uh uh so let's pull that up there and let's get the browser opened and I've been doing this whole thing in responsive mode I can turn that off now I want the full screen I'm gonna have to do some work in my HTML I think also in this one as I go along um so if we remember I have set up this grid here and I'm gonna have to open up my grid uh file oops let's bring this up to the top um I can close my colors and my footer and my call to action and my type for now I might have to jump back into those um so my grid is pretty much just doing a display flex and it's making sure that things wrap around which is stopping these from going next to each other um I haven't set that up with anything so actually let's do that now so actually let's do this one first and then we'll jump back up to the top um if I look down here let's go find those not my hero sales points I have column column column so what I'm going to have to do now is build in my media query um yeah so let's just jump in right there I'm going to say at media Min width of 725 pixels 725 is super arbitrary I am just grabbing that number at random um and it's just because that's sort of where I don't like what the site looks like anymore as I've been going through I've been paying attention and I just in that 700 to 750 range I found things started getting kind of ugly oh I forgot to put padding there um so yeah I find these are getting really long now they're taking up too much space I'd prefer now if those actually fell into columns so around this range um a lot of people like building media queries around specific devices uh the iPhone to iPad to I don't know you know the the laptop you know the iMac to the the Mac or whatever it is is very popular but there's so many bloody devices out there not everyone's on an iPhone just because you are doesn't mean everyone else is and building it around those breakpoints to me doesn't make much sense you should be building around where your site is breaking and not around one specific device or set of devices in this case my site's not really broken at any point exactly it just starts looking ugly so that's sort of broken in my opinion so at 7 25 is where I've decided uh my site is breaking I'm not going to have some at 7 25 another set at 7 30 another set at 7 35 I'm going to stick with as many as possible uh just with that one number yeah so let's um get in there so the first thing I'm gonna have to do is actually make these uh column thirds so we'll say column uh one third we'll just copy that on all of them copy column one-third and column one third and what's my column one-third going to do uh column one whoops one three is going to get a flex basis of 33.3333 percent uh I'm too small so that should now there we go it's breaking oh we're gonna have to fix that my media queries too I'll get back to that after um the only thing is right now they're really they kind of stick together there's no space between them so on my actual columns we build some padding into these um so what are we going to do we are going to build let's say uh padding zero top and bottom 0.5 M right and left uh actually we can make that a bit bigger maybe I'm just thinking anyway um there we go that looks better we have a little bit of space always between them now and the only thing I'm going to add to this is uh what do I want to do I want to say that my whoops and first of type first of type yes my first of type has a padding left of zero and I can just copy that whole thing and the last of type has a padding right of zero so anytime there's a column the First Column will not have any padding on the left and the last column will not have any padding on the right those maybe should be built into the media query though right do not screw up alignment column and yeah and now if I look at this column yeah that's going to scrub the alignment a little bit so these should actually be built also into that media query uh and this is where SAS does come in handy uh at media Min width of 725 pixels and I can just tap those over and now they're part of the media query so that looks properly centered now but when I get to this now the the padding will all be set up properly so super uh I need to do the same thing for a my padding top I think that's just in my promo section though right uh where's my layout home promo oh it wasn't in home promo close you uh where was it then if it wasn't in home promo what's giving me that space on top I'll miss it I'm thinking home problem promote your app but I'm in my sales points uh sales points yeah so in here I'm going to do an at media Min with 725 pixels and first of type margin top of zero perfecto and actually we should also bring oh no that's it super that looks Perfecto I'm happy with that good good good um so let's come up to here now I just I wanted to do that with those three just to sort of get that going and get the feel of everything let's jump up to here now I'm going to go to my base my base dot SAS so I can turn on my uh large screen so my large screen starts at media Min width of 750 pixels display a block so it should turn back on great except obviously that's not where I want this to be I want this to be up and next to there instead so let's do that [Music] um I'm gonna probably let's go look at how this is done actually I have a column and this will actually be a column column one three which won't really change much it's just going to make my image a bit smaller um this one will be a column two whoops two thirds two two two two two thirds save um so let's go check that out um hero bring you up to the top my hero so no not my hero I will have to make some changes to this though so we'll leave that open go back to grid I have a column two thirds Flex basis of 66.66 percent there we go uh so that right away looks a lot better and then it disappears and reappears but I will definitely in my hero need to make some adjustments now so if we open up my Photoshop file this is left align text and you can see my phone's overflowing out the bottom a little bit so I'm gonna have to play with my padding and all of that um so add media Min width of 725 pixels I am going to say uh what did I call that one with the phone in it uh there's no I have my hero image let's say that my hero image has a marred I don't really like negative margins but I want to be a little bit higher up so um actually before actually I'm doing this wrong anyway uh no it's okay um my hero let's get rid of hero I'm intro now hero we'll have a text align left I'm just gonna do this instead margin top of 3M whoops no no no back back save silly silly silly I want that on my a hero text um I'm just trying to think from a media query because this is I don't want yeah I'm gonna say I'm going to copy this copy I'm going to say my hero text um margin top of 3M that looks better uh and the reason I'm doing it this way where I have hero text then the media query is just the way that SAS handles the indentation system if I had just this here like that the CSS that that would output would look something like this where it would output um hero hero text [Music] and then do the margin top on that and I don't want this specificity on here I don't want this sort of defeats the whole purpose of giving everything a class name uh it's this will probably always be in here but just you know I don't want to take any chances um I don't like working that way I think it creates hard to maintain text and it's super easy to go down a rabbit hole on that this makes it a lot easier to maintain and If Ever I did need to just change something on my regular hero text it would be super easy to come in and do now uh by itself I need to change the color of this for some reason I just come in here and I can change the color on it so I find this a lot easier to maintain personally uh um so there we go that's what I'm going to do padding bottom of zero and I actually want to Let's close this because that's not what it will look like um I'm going to change the overall height of this I think because I'm thinking it where's my hero text hero text margin top will be [Music] uh uh five viewport min does that make sense or is it Max V Max that way as this gets bigger and bigger and bigger see what's moving down I want it bigger than that even though let's say that's 10. that way as the screen gets bigger and smaller and bigger and smaller it sort of adapts and sort of stays centered it's not perfect but it's not too bad that actually looks a lot better wow I like that so it's staying it's it's keeping everything balanced a little bit more I really like these using v-min and V Max for situations like this they can be super useful so I'm happy I finally figured out how I want to set that up I just want to pull this up a little bit [Music] um without necessarily giving it a specific height um just to tuck it in a tad but you can easily run into issues with this let's just say um I want to do a height of 90 viewport Max min either way it's gonna look weird right that's actually okay that's okay that's okay that's okay that's okay that's okay it looks kind of boring actually right now eh I'm gonna force that to break as well I don't like that it's on the next level it serving me nuts that's okay that's okay and my phone's gonna that's okay actually I could even make this a little bit smaller probably let's go with 80. it should be okay now the only time this could cause an issue and will cause an issue actually I'm sure because I'm wearing them in um yeah just like this when the viewport gets tiny um so I could give this a Min height of course Min height but what would my minimum height be my minimum height should be let's 800 pixels why is this left aligned but I have no phone did I do those at different break points 725 725 [Music] whoops 725. so that's okay that's okay it's has a bit of scroll but that's okay is that okay I'm gonna do that well it's really you know adjust only when I get it much bigger and I do that you can see it's adjusting to the size of my screen but at one point it stops getting smaller because I don't want it stuff to overlap and get really awkward looking so I think that makes a lot of sense uh so there we go that's done this is done uh this one is uh we have a couple of column halves there right so we're going to jump down to here let's just open up Photoshop and take a quick look yep so I have two halves that I need to deal with there so that's nice and easy we're gonna keep plugging away at this so we're going to jump back over to my grid we're gonna keep this up on the screen and I'm Gonna Keep flying through this one third one third uh column background primary so this one is my let's get rid of that space this one is my column uh one half whoops copy that and this image box which might end up changing but that's also going to be my column one half uh that can go here column one half is a flex basis of fifty percent awesome not awesome what what what what what I don't know my title box is flexing crud oh key dokie so I think because I could fit in all of a sudden this is flexing and it's going all crazy this has the translate on it so it's shifting down 50 of its height and don't know quite why the high oh because it was matching this one because everything's flexing this is matching the height of that one because they're next to each other and that's just causing all sorts of weird stuff to happen and I'm actually wondering if I need that title box inside my grid or if I can move my grid over to here would that make it work yes except now that's way too big let me just do an inspect on this I want to check I might have broken what this was like at the smaller size no that's still working properly at the smaller sizes except my padding bottom I broke something along the way but uh oh because I didn't no that's in my media query what's going on what happened to my padding on that uh that's that's even was that wasn't that in my baby primary oh no my columns padding is breaking at all because this is in my base I could have my grid come before my base where's my grid and where's my base oh because that's my base Styles and that's in my layout hmm [Music] I'm just wondering if I should put an important to hate putting important on anything whatsoever oh I didn't think of that that's a problem for my grid I'm actually gonna move where my grid is then I know it's a layout item um but I want to be able to overwrite the padding on it anywhere I need to so I'm just going to pop that up there because that was going to cause all sorts of problems okay and that's more or less working I just want to give that a Max width actually um which title box right so that would have been under typography uh my title box should have a Max width uh uh ninety percent and I know I already started building in some media queries there um at media Min width of 750 25 pixels I like spacing these out just a bit more so there we go uh uh Max with [Music] um I don't even think I want this as a percentage Max with uh uh say 700 pixels much better I don't want that to stretch all the way across the screen I want that to just to lock in place super duper that's a lot better um this this image is obviously having some issues and I was a little bit worried about that um I sort of assumed that would happen and I also have some problems with this box and everything um was that Center aligned no and the left align on that um I want that to be left aligned and my image isn't taking up the whole Space uh let's get rid of this there's some padding and because it's an image it gets that little space on the bottom the space on the bottom is easy enough to fix but the padding issue on the left is not as easy to fix so I'm gonna make this a background image I had a feeling I might do that and I also need to fix up some of the spacing okey-dokey so what are we gonna do first let's fix up the spacing on that blue one and I'm going to move this a little bit bigger and make this smaller because we can um so my blue box is my base my BG primary see I want to leave that alone I don't want to start playing with that now I'm going to get into geez this is where things not a sale Point promo title box column BG primary is all I put on that eh um okay let's go over to my promo file where I have nothing home promo which is empty [Music] um what I want to do I'm going to do it like this for now promo BG primary which I'm usually avoiding at all costs I just talked about avoiding that at all cost but uh text align left uh padding left 10 percent too much seven percent [Music] that looks better uh padding top of 10 m mm too much 5m 7.5 M right in the middle or actually [Music] um yeah I'm gonna have to have more space on the top than the bottom that's fine um how did it look in Photoshop yeah you have to have more space on the top than on the bottom my bottom spacing was a little bit bigger though uh padding let's just say padding bottom 7.5 you know what we'll do that um yeah we'll do that uh and you see this is where the I had a feeling the picture would cause all sorts of weird issues so my picture I don't like having um I don't have any classes on that um I don't like having an empty div like this that doesn't actually have any content in it but I'm going to do it anyway uh that was my again image box uh background is URL of URL of um did I just for fun I did phone in hand.jpg [Music] dot dot paste [Music] um so background size would be cover and a background position would be Center and then now that's perfectly responsive and it will always work just fine and that was the solution I had a feeling I was going to do but I wanted to see if I could avoid it thank you so much for watching this video that's it that's the end of this one I hope you liked it in the next video that's going to come we're going to be looking at the rest of the site so I'm going to do the call to action the footer and then at the very end go all the way up and do the navigation just because I completely forgotten to do that from the beginning so I hope you liked the video if you did hit the thumbs up if you did like it and you haven't subscribed yet subscribe so you don't miss any of my other videos I bring you one every single Wednesday and I can't wait to see you guys in the next video later