Before we do some typography work, I thought we would fix the annoying thing where the images are busting outside of the article area and the grid. Using some simple CSS rules to override inline image attributes and style, we can squish images to fit into our post at the correct size.

Squishing images like this used to be rather uncool as browsers did a bad job of resizing, but this isn't the case anymore. It's actually kind of a good idea as displays are getting higher resolution, as the images will be sharper.

The resizing is essentially dealt with by:

figure img {
  max-width: 100%;
  height: auto !important;

We style up the figures and figcaptions just a little bit to make them look, you know, like a proper figure in a blog post.


  1. ulic75
    Permalink to comment#

    This video is appear under the #23 one on the list of videos.

  2. Makis
    Permalink to comment#

    Awesome screencasts Chris, full of little gems. The design rocks!

  3. Joi Glifberg
    Permalink to comment#

    Chris! It seems like you have mistakenly mixed this screencast and the present 23rd one.
    Because this is actually the 23rd one. Please fix this :)
    Btw, great screencasts, I totally love them!

    • Chris Coyier
      Permalink to comment#

      Seems like the correct one to me. What are you seeing? Can you explain in more details or screenshot me? I’m also moving the video hosting again, so will probably be revisited tomorrow and fixed if there is something weird.

      I’m going to bury this to keep the comment thread more directly about the content. Cheers!

    • Joi Glifberg
      Permalink to comment#

      Well I noticed it because in this (the 22nd) screencast the _typopgraphy.scss file is already created, but in the next (the 23rd) screencast you actually create that file :)

    • Chris Coyier
      Permalink to comment#

      Ahh interesting. I suppose I could just switch around the numbers/ordering. Would everything else make sense?

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.