On larger screens, we have more room on all our pages. We've dealt with this on the homepage, but we can do better on the other subpages as well. A single blog post page is an important one.

By default, we output a list of all older blog posts below the current article. On mobile we show that below the current article. We can use that as a right column on desktop, conjuring up a bit of a grid. We fiddle with the HTML just a little to make it happen and then move it over to the blog homepage as well.

Comments

  1. Charlie Craig
    Permalink to comment#

    Hey Chris, fantastic course and very inspiring and practical. I see on the live site that you choose not to use a max-width for paragraphs. Is there a reason why you did this? Ta

    • Chris Coyier
      Permalink to comment#

      Hey Charlie,

      I haven’t quite gotten to syncing up perfectly the live site and the site we built in this series. Your nudge has gotten me on the job though, it should soon be done.

  2. Marcus Burnette
    Permalink to comment#

    As you mentioned that just setting a max-width on the paragraph isn’t the end-all of typography on a site, I thought of an interesting module for Drupal called Style Guide that essentially sets up a page of common HTML elements within your theme so you can see what styles you have applied to each and able to be prepared for anything a site author might use.

    Not sure if there’s a WordPress plugin equivalent (or if it even matters), but the concept of having a style guide type of page in a site, especially for client projects, seems like a cool idea.

  3. emanuel
    Permalink to comment#

    Why not set the max-width on the entire column instead of just paragraphs etc?

    • Chris Coyier
      Permalink to comment#

      You totally could. I’d make sure you float: right the other column so if it does get capped out the right column still lines up to the right.

      It might be nice to see images larger though. Just a design call you could make.

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 in triple backtick fences like this:

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

We have a pretty good* newsletter.