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

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

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

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

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag