7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 27Length: 4.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 Styling the Footer

In the previous lesson, we've styled the home page content, and the last remaining piece of that is the footer. So let's go ahead and write the CSS for it. So the footer has a dark background. It has this top border of 4 pixels, so let's start with that. I'm gonna open up footer.html. Let's see, class ap-footer, and we have a couple of lists here like ap-divided, ap-footer-links, and then ap-footer-secondary. Okay, let's open up footer.scss, and we'll start with the main one, ap-footer. Let's set the background-color to ap-black-85. We're gonna set a border-top of 4px solid, also ap-black-85, I believe. Let's double check just to make sure. No, it's actually black-50. Okay, and then ap-footer-secondary is gonna have the exact same background color, so ap-black-85. No, I was wrong. [LAUGH] I do apologize for this, ap-black-50, okay? Let's take a look. Yep, looking good so far. Let's style this list of links. We need to add those separators and add a bit more padding. So I'm gonna open up lists.scss. And we'll start with ap-divided, and in here, let's target the list item. I'm gonna set a margin-right of 2rem. And for those separators, I'm gonna use an after pseudo-element. So after, I'm gonna set the content to a pipe character. I'm gonna set the display to inline. I'm gonna set to color to ap-white-15, vertical-align to middle, and also a padding-left of 2rem. Okay, and let's check it out. Great, let's also remove that pseudo-element from the very last item. So on the last-child, we're gonna set the margin-right. We're gonna reset it to 0 after, simply set the content to none. Okay, that's good. Next, let's target these anchor tags, and add a little bit more padding to them. For that, I'll go to typography. Let's see, top-bar, ap-footer. Okay, so right here, I'm gonna say ap-footer-links, list item anchor tag. I'm gonna set a padding of a 2rem on the top, 0 on the sides, save that. Okay. And now, that's complete. Finally, let's I move on to this footer. And for that, I'm gonna go to the typography. I'm gonna target the paragraphs. And the paragraphs that are situated within ap-footer-secondary have a color of ap-white-75, and also a margin-bottom of 0, save that. And now, these are also aligned perfectly with the social links and with this logo. Now, this looks very good on a large screen. But let's check it out on a tablet and see if we need to make any kind of changes. This works just fine. So we've already covered that, no problem. However, this page header needs to have a little bit less padding. So, if we go to headers on medium, medium down, which means medium and small, I'm gonna reduce the padding to 6rem and 0. And on small only, the padding will be set to 4 rem and 0. So here it is on laptop, here it is on a tablet, and on a small screen. So that padding gets smaller and smaller. What else? Our index list is now displayed on two columns, no change needed here whatsoever. However, on the footer, there are a couple of changes. Looking back into Sketch. We can see that this menu is centered on the page. And also, these items from the secondary menu are also centered and stacked one on top of the other. Going back here, you can see that the items are already stacked. We just need to align them on the center. So we're gonna open, actually, footers. And right here, I'm gonna say include breakpoint(medium down). I just copy and past it from previously, simply gonna do text-align, center, and also ap-footer links and ap-social-icons. Because we've used Flexbox to align those, we need to set justify-content to center, okay? Let's take a look. Yep, everything is now nicely aligned in the center. Now for this ap-footer-secondary, I also want to make a small change. So on medium down, I'm gonna set the padding to 1rem and 0. So top and bottom, let's just gonna give it a little bit more breathing room. Finally, let's see how this looks like on small. So on a very small screen. This still works as expected. However, we do need to make a few changes to the container sizes and the grid padding. We'll go to containers. In here, I'm gonna say, include breakpoint, so, small only. I want to set the padding to 0 and 2rem. So that's just to begin with. Next is this grid. And we have that code inside lists. So if we go back here to our ap-index-list, when we're targeting the cell right here, I'm gonna say, include breakpoint(small only). And I'm simply going to reset the padding-left and right to 0. And then since I'm here, also on small only, I want to have a slightly smaller margin-bottom for this whole list, 4rem, instead of six. So with those changes, we no longer have that padding, because we don't need it. The cells are displayed in a single column right now, okay? Scrolling down, let's see about the footer. Okay, now the footer, I want these items. First of all, to not have the separator and also be aligned in the center. So we'll go to ap-divided, and on the after element, on small only, I set display to none. And then on the last-child, I simply set a margin-right. Of 0, and on small only, I set a border-bottom to none. So it looks like this. Now to center these properly, I'm gonna go back to footers. And inside ap-footer, right here, I'm gonna save that on small only, ap-footer-links, has a flex direction of column instead of a row. So these are now displayed vertically, all right? And apparently, we still have a little bit of a problem here, and I wonder why that is. Okay, that's because these list items still have a margin-right. Okay, so that should be in the list. Yep, we have this margin-right of 2rem, so let's remove that. We're gonna say margin-right: 0. And also, we're gonna add a border-bottom of 1px solid $ap-white-15. This is just to separate these vertical lines. And also the anchor tags should have a width of 100%. Just like that, awesome. So our page now looks perfect in all screen sizes. So we have this mobile, if we go a little bit bigger. Yeah, everything works perfectly. Tablet, this is what it looks like in tablet mode. And also, here it is on desktop mode. And actually, I did notice something. The active items do not have this border. So let's fix that really quick. I think we need to go to navigation, no, typography, actually, because the anchor tag should have that border. So let's see, we should go to the top-bar. Okay, so top-bar ul. Top bar, let's take a look at the code here really quick, okay? So, okay, so top-bar list item is active. So let's do that right here. We'll say, top-bar list item with the class of is-active, anchor tag after. And then we set the width to 100% and that should fix it, okay, perfect. Yeah, so because this is not actually a border, it's a pseudo-element. It did not have an initial width of 100% if the parent item was active. But it is now fixed. Okay, since the home page is complete, we'll move on. And we're gonna style the article page that you see right here, Introduction. It already has a bunch of styles, ready to go, but there are still a couple of things that we need to do. So we'll do that in the very next lesson. I'll see you there.

Back to the top