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. User Avatar
    Permalink to comment#

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

  2. User Avatar
    Permalink to comment#

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

  3. User Avatar
    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!

    • User Avatar
      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!

    • User Avatar
      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 :)

    • User Avatar
      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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.