Change width of sidebars in TwentyFourteen

  • Author
  • #1793582

    I want to make both the left and right sidebars the same width while keeping a little bit of whitespace on either side of the central blog posts.

    Based on the full site width of 1260px my ideal layout would be:

    Primary Sidebar (left) – 280px
    whitespace – 14px
    Central blog – 672px (based on the featured image width)
    whitespace – 14px
    Content Sidebar (right) – 280px

    I’ve been experimenting using the css preview but although the content in the primary sidebar (eg Twitter feed) expands the black background doesn’t?

    Also I’ve noticed that blog posts are aligned slightly more to the left of their featured image. Can they be centred? (99px either side by my calculations)

    Thanks in advance for any help

    The blog I need help with is


    Hi, give the following a try. You can try out and preview custom CSS before you buy as explained here. To be able to save and apply it, you will need to purchase the Custom Design Upgrade.

    @media screen and (min-width: 1008px) {
    .site-content, .site-main .widecolumn {
        margin-left: 280px;
    #secondary {
        width: 220px;
    .site:before {
        width: 280px
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
        margin-right: 0;
        max-width: 560px;
        padding-right: 14px

    I’ve limited the above to 1008px and wider screen size as that is when the left sidebar drops down below the content on this responsive width theme.

The topic ‘Change width of sidebars in TwentyFourteen’ is closed to new replies.