43. Fixing up some loose ends - Responsive CSS Tutorial

so that I gave you in the last we will be wrapping up this module in the next video but this is the finishing touches on this site before we move on to stepping up our style where we're gonna look at some other more finer tune though let's not get ahead of ourselves and let's see what we can do so the first thing is the challenge that I gave you in the last one of fixing that image I'm gonna come and put it all the way up with my other image class my image style it could probably come in to layout here as well because this is all layout related stuff the reason I'm you know my other ones were article related but this one technically he could be used anywhere it could be used inside an article if I ran into another post or maybe there is no sidebar and it's just this full image that takes up the full size then it would work there too so I think it makes sense in this case just to throw it up here where I have my images which is all the way at the top here because it's sort of like this image helper class so I called it image full and all I want to do is give this a max width that not a max width I said to give it a max height I'm gonna give it 300 pixels but when I do that it's trying to keep my image in proportion so I'm gonna give it a width of 100% so it always stays at 100% but the problem now is it's all squished and he looks a little bit chubbier than he should so we want to come on and give it the object fit property with that cool cover value that we looked at where it will crop the image for me and it's looking perfection right there and I think my image full will always have a margin underneath it so our margin bottom I'll just give it a 1m to give us a little bit of space and you know what I don't know if that'll be enough so I'm gonna do two before I even go and look at it ha love it I think that looks fantastic so that's I'm super happy with that it's looking really good the next thing we do is just change the color of these and I think I'm done for this this site I'm really happy with it as I said in the next one we'll be looking at stepping up our style so for that I'm in my typography section now let's go and look I actually those were just H threes I never even gave them a class which is cool so I can just come here and say my h3 has a color of the bright blue color um now I did group that with here I could break the color out of here and apply it but then I you know and being a little bit lazy with my CSS now we're defining two different colors it's just always the second one that's gonna win I just don't feel like making another selector for it to be honest with you and I don't mind overriding things a little bit it's easier than breaking this out having my h1 mage to have all of h3 have all of it and then another h1 h2 that just as the color oh I'm just gonna put it like this where I'm overwriting that a little bit because it's going to work and my colors are there oh no my goodness look it changed these ones as well that's not good so we can go and fix that just really fast as I said we're wrapping up right now so I want to come down to here and those are with my widget recent post title so we want to grab that paste it in there and change the color of those color to the dark blue and with that that is looking awesome we have the darker titles back to there I'm going to remove that because it's driving me absolutely bananas and we got one last thing that we need to take a look at and that one last thing we need to do it has to do with our navigation can you think of what it is will I try and find this mistake err so our navigation is working I'll find all the different pages are working but our current page class got lost so I want you to go in and add the current page to the correct page on all the pages to finally wrap up this site so all we need to do for that is if you remember on our index I'm gonna do it on this one first I'm at the class of current page let's go take a look we get the underline we gets rid of that hover but these ones are still working but when I go to way about me I want this one now to be that so if I want to go to my about me that's actually make our life easier by copying all of this and then I can go to my about me find the right spot right there and paste it in and then I can go over to my recent posts and I can do the exact same thing there where I paste it in so we're saying what page we're currently on and now when we go and look all the pages get that nice little underline on it to indicate what page were on while we're navigating around and with that we are done we have wrapped up this site everything is looking really really good I'm really happy with how it turned out I really hope you are too we covered a lot throughout this module so in the next video we're gonna do a wrap-up of all the different things we've covered and where we