Flexbox Footer Practice

[00:00:00]
>> For your final challenge I'd like you to lay out the footer of this web page so we have the mission and the collection and then the footer is going to go down here at the very very bottom. And the footer is going to include Several elements here we have some social media icons and we have an address that's here in place.

[00:00:18]
And so this is the way it should look at the very bottom of the webpage stretch that yellow all the way across the full width of the browser window. But line up the text and so forth in line with everything else that's there on the page. Then when we go to a tablet, this is the way it's going to look.

[00:00:37]
We only have two columns to work with here. So the stay connected will stay under the first column, the wall of wonder, that address will go under the second column. And then finally, when we get to a mobile version of the site, just stack everything on top of each other.

[00:00:58]
So how'd you deal with the footer challenge? Hopefully you did all right, let's go through the answers that I came up with for this. So we'll start here on line 63. And you'll notice that I have sort of an odd looking setup I have a div with a class of footer.

[00:01:14]
And then I have a footer element by itself, why did I do this? Well eventually that div with a class of footer is the element that will stretch all the way across the webpage giving me yellow from one corner of the browser window to the other. And then the footer part of it is going to contain my content and will have a max width of 1200 pixels on it.

[00:01:35]
You'll see that in just a moment. And so that'll keep everything in line with what came before. So I've given us a div with a class of social. And the reason for that, why why is this div here? Well we have a div and we have an address remember we have to manage our parents and our children.

[00:01:56]
And so if we set our footer element to have our Flexbox declaration on it any children after that We'll be part of that layout so what I really wanted to have happen was. I wanted to have the social there on the left hand side and the address over on the right so that is the reason why.

[00:02:17]
I needed the div to wrap around the social information to make it one unit For positioning purposes. So, inside of that this is an h4. This is very far down on the webpage. We have an unordered list once again because this is a list of social media icons and it's marked up as such.

[00:02:40]
There they are. And then we make use of the address element down here at the bottom, this is of course a postal address. And the address element is a wonderful thing to be associated with address can also be used for a lot other things, any method of communication.

[00:02:58]
Whether that happens to be phone numbers, emails, social media it could be potentially used with the social media and so forth geographic coordinates are one of the things that address can use. The other thing that's really interesting about address is where you place it on the page Is an indication of whether this is the address for the website or an address for the author of an article.

[00:03:22]
So if the address is located towards the bottom of the webpage usually as part of a footer that is an indicator that it's an address for the organization or for the website.. If you use the address element in an article, for example, then that address is generally associated with the author of that article.

[00:03:41]
All right, so then for our styling portion of this. Here we are around one 159 In that ending CSS. We have our class of footer. It has a background color of yellow, it stretches all the way across the page because we're not putting any constraints on it. And then inside of that, we have the footer element itself self with a max width of 1200 pixels, we've also declared this as a display of flex.

[00:04:11]
And then we add to this, some additional styling notice that to get those two social media icons next to each other, we needed yet another round of Flexbox declaration. So here on the footer, UL I've displayed flex again, in a flex flow of row wrap. That's to put the two social media icons next to each other.

[00:04:37]
And then down here, here's the little bit of styling here for the rest of the footer. That basic stuff we have our footer address. By default, the address displays metallic so we needed to turn that off that style of normal with a margin top and then I threw on a font weight of bold.

[00:04:54]
Okay. As we get into the media queries I don't think a whole lot changes in here. It's pretty straightforward with the address I did turn off a little bit of margin that was on the Up on the top of the address. We needed that on mobile when they were stacked on top of each other, we needed that little bit of space.

[00:05:13]
But when we go to the tablet, that little bit of space makes these things look crooked. So we need to get rid of that to bring them back together and make them on the same level. We've also changed some flexspaces values over here as part of the final desktop based media query.