Want a better viewing experience for your readers? Expand the content max-width of the Massively theme

This is a helpful hint to folks using the Massively theme. You will have to adjust it to work with other themes.

Hello everyone.

I love Ghost. And I really love the Massively theme in particular. But one thing I really dislike about the theme, and many others to be frank is how narrow the content is. I want to my readers to be reading an “article” or “document”, not a ribbon of text that reminds me of a twitter comment thread.

So, if any of you are fed up with how narrow that content is, in Massively (and probably many others), I have a solution for you. It’s so narrow because the default CSS currently has div.content set to max-width: 700px. I set mine to 1000px and now the content looks like … actual blog content. For contrast, I think Casper is set to 840px (still too narrow, IMHO, but certainly better).

To change it.

  • Go to https://your_blog/ghost/
  • Settings
  • Code Injection
  • Site Header

I plunked this in there and am much happier:

<style type="text/css">
    div.content {
        max-width: 1000px;
        margin: 0 auto;
    }
</style>
  • Save it and view your site.

Remember: Other themes will have to be adjusted somewhat differently, but this should give you at least a start for how you tackle the problem.

I know this is very basic for many of you, but it isn’t for many others. I hope this helps someone.

Ciao -errantruminant