Increasing content width of WordPress Twenty Seventeen

Increasing content width of WordPress Twenty Seventeen

This will be a short post but hopefully helpful to some of you. It took me a while to get used to the new default theme in WordPress, Twenty Seventeen. I like it a lot now, with the striking visuals and large header images. There was just one problem for me: I think the content is too narrow for blog posts. It took a bit of searching but I’ve found a good way of increasing content width of WordPress Twenty Seventeen.

The solution

I’ve run with the new theme for a while now and liked most aspects of it right away. The only thing that I didn’t really like, was the narrow content of blog posts. I felt the text was too squeezed, especially for wide-screen machines. I know that you can edit the CSS of the theme but I’m really not up to speed with current CSS. Rather than experimenting and possibly ruining the look of my blog, I turned to the Duck for a solution.

It didn’t take long search to find a solution on WPBackend.com.  I followed the instructions in this article and they worked very well. However, there was a problem with the width on mobile devices after implementing the full custom CSS in the article. The sidebar became way too narrow to be usable. I tried tweaking the width but this didn’t really improve matters. So eventually, I ended up using only the first part of the additional CSS. Mine now looks as follows:

.wrap {
max-width: 1200px;
padding-left: 2em;
padding-right: 2em;
}

For my blog, this works well enough for increasing content width of WordPress Twenty Seventeen without messing up the look of  my blog on mobile browsers. Thanks to Anu Jones for these instructions!

Leave a Reply

Your email address will not be published. Required fields are marked *