Support » Theme: Twenty Sixteen » [Theme: Twenty Sixteen] How to change the content area width?

  • I am using the Twenty Sixteen theme on this website

    I would really like to make the theme not so wide, though? Is there any way I can adjust the width so that you can see more of the background image and not just the tiny little sliver on either side?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi there, That’s not Twenty Sixteen. You are using Tonal theme. Here’s the support page link:

    @emmijade’s site looks like Twenty Sixteen to me!

    I want to do the same – it’s the one thing about Twenty Sixteen I don’t like (the rest is great!)

    It seems silly to have a background image at all when all you can see is a tiny band around the edges. I’ve played around (in a child theme) with adjusting .site-inner, but that just changes the central content area, leaving the huuuge white space between the content and the background image.

    What should we be adjusting to reduce that space and let more of the background show?


    Found it!

    Just change the .site margin:

    .site {
    margin-left: 15%;
    margin-right: 15%;

    15% works pretty well, but you can adjust it to be even tighter or to your preferences. It looks a little silly when you reduce the width of the window, but the idea is to make it look better on a normal browser setting of at least 840px, which it does.

    If anyone else has a go at this, please let me know how it works for you!

    Discovered that this defeats one of the main reasons I chose this theme – responsiveness – it looks rubbish as is on mobile devices.

    Trying to play with the css for smaller screens, but not having much luck – anyone have more clue??

    No luck here, but I, too, would like the answer to this question.

    Your post is a month old, so you may no longer need this.
    Try the following. You can adjust the width to your liking. I checked this on an iPAD Mini and an iPhone 6. It moved some items on a tabbed list, but that was all, and easy to fix.

    .site {
    width: 85%;
    margin: 0 auto;

    .site-main {
    max-width: 100%;
    overflow: hidden;

    You can try this plugin, you can use Google fonts, wide template and change menu position:

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme: Twenty Sixteen] How to change the content area width?’ is closed to new replies.