How to Adjust Content and Sidebar Width in the Twenty Seventeen Theme

Many users of the Twenty Seventeen theme want to adjust the layout of their content and sidebar. This is a common request to improve the site's aesthetics or to create a more focused reading experience. Based on community discussions, here are the most effective methods for modifying widths and managing your sidebar layout.

Understanding the Default Layout

The Twenty Seventeen theme uses a responsive, two-column layout by default for blog posts and archive pages. The widths of the main content area and the sidebar are controlled by a max-width property on a container and the use of percentage-based widths for the columns. Changes to these values require adding custom CSS.

Method 1: Adding Custom CSS

The safest way to make these changes is by using the built-in 'Additional CSS' feature in WordPress. This prevents your modifications from being lost when the theme updates.

1. Navigate to your WordPress Dashboard.
2. Go to Appearance > Customize.
3. Click on Additional CSS.
4. Paste one of the code snippets below into the text area.

Common Solutions and Code Snippets

1. To Remove the Sidebar and Use a Full-Width Layout

If you want your blog posts to span the entire width of the page without a sidebar, you can use the following CSS. This hides the sidebar and expands the main content area to 100% width.

.single.single-post #secondary {
    display: none;
}
.single.single-post #primary {
    width: 100%;
}

2. To Adjust the Width of Columns

To make subtle adjustments, like making the content area slightly wider and the sidebar slightly narrower, you need to adjust the percentage-based widths. The default width for the main content #primary is 70% and for the sidebar #secondary is 25%. Adjust these values, ensuring they do not exceed 100% when added together.

@media screen and (min-width: 48em) {
    .has-sidebar:not(.error404) #primary {
        width: 72%; /* Increase from 70% */
    }
    .has-sidebar #secondary {
        width: 23%; /* Decrease from 25% */
    }
}

3. To Make the Entire Content Container Wider

Another approach is to increase the max-width of the main container, which will make both the content and sidebar wider on large screens. The default container has a max-width of 1000px.

.site-content .wrap {
    max-width: 1200px; /* Increase from 1000px */
}

Important Considerations

• Testing: Always test changes on a staging site first or use a browser's developer tools to preview CSS adjustments.
• Responsiveness: The provided CSS includes media queries to ensure changes only apply to desktop-sized screens, maintaining mobile responsiveness. Be cautious if modifying these queries.
• Specificity: The CSS selectors used here are specific to the Twenty Seventeen theme. Using general selectors like #content or #sidebar will likely not work, as seen in community threads.

By using the 'Additional CSS' option and the code provided, you can successfully customize the width of your content and sidebar in the Twenty Seventeen theme.