In this final screencast of building out the footer, we work on the bottom footer where the CodePen and ShopTalk areas are.

We have to change the HTML a bit as come come to the realization that the four chunks along the bottom (logo, text, logo, text) would make sense to be a series of inline block elements that are centered on each other (vertical-align: middle;).

We run into the issue where there is extra space between inline-block elements so we use the font-size: 0; trick from this article.

We get the layout working in the end, but you don't actually see me drop in the real images. Like we did with the Photostar I make a new Photoshop file just for these footer logos. This just makes it easier to deal with and future updates to these logos easier. I also make them 2x in size and scale them down so they look good on Retina displays. I drop them in the placeholder image tags we have and it works great.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.