Responsive Footer Layout

[00:00:00]
>> Jen Kramer: All right, so that takes care of our layout now for our mobile display. Let me make my window bigger, bigger than 750 pixels, okay? And now we can add to our media query in order to change this to make this work for desktop, so I'm just gonna continue adding styles down here to the bottom.

[00:00:24]
You'll notice that our icon bars already shifted off to the left, that's because we have our icon style here, it says our justify content is flex start so that's already done. And then we can go back to footer, just regular old footer, we can say text align left, and that will shift everybody off to the left side of the page.

[00:00:49]
Then we can say our footer text, our footer text, this will be grid, hyphen, template, hyphen, columns, and this will be repeat 3, 1FR. So that will give us our three columns here on the page, right? And then now, for these icons down here on the bottom, they are looking good as well.

[00:01:22]
All right, so everything looks great.
>> Jen Kramer: Looks like a footer there, looks like a footer there. Our font size automatically bumps up, because we already wrote that generically for the entire page, so we don't have to write it specifically for the footer. You'll see that the font size is changing from teensy tiny to slightly bigger.

[00:01:47]
Remember, at this dimension, the desktop dimension, we changed our value of our default text size to 1.125 rem. That'll be multiplied by 0.85, so whatever math that comes out to be, it'll be slightly smaller text relative to the rest of the page when we finish writing it.