Back to Community
Home / Community / Theme → Twenty seventeen

How to Adjust the Content Width in the Twenty Seventeen Theme

47 threads Sep 11, 2025 Theme → Twenty seventeen

Content

A common challenge for users of the Twenty Seventeen theme is the default, narrow content width. Many site owners find that their text, images, and other elements are constrained, leaving excessive empty space on the sides, especially on larger monitors. This can make a site feel unbalanced and limit design possibilities.

Based on numerous community discussions, this issue is not a bug but a deliberate design choice by the Twenty Seventeen team to optimize readability. However, the theme's structure is highly customizable with CSS. The problem often arises because users adjust the main content container but forget to modify related elements like sidebars, images, and front-page panels, leading to inconsistent or broken layouts.

Here are the most effective solutions gathered from the community to help you achieve a wider, more balanced layout.

1. Adjusting the Main Container and Content Area

The primary method for changing the site's width is by targeting the .wrap class, which controls the main container. For a site-wide change, use the following CSS in the Appearance → Customize → Additional CSS panel.

@media screen and (min-width: 48em) {
    .wrap {
        max-width: 1100px; /* Adjust this value to your preference */
    }
}

If you are using a sidebar layout, you will also need to adjust the width of the primary content area and the sidebar to prevent layout issues.

@media screen and (min-width: 48em) {
    .has-sidebar:not(.error404) #primary {
        width: 67%; /* Increase the content area width */
    }
    .has-sidebar #secondary {
        width: 29%; /* Adjust the sidebar width accordingly */
    }
}

2. Making Images and Galleries Responsive

A frequently reported issue is that text widens after applying CSS, but images and galleries remain at their original size. To ensure your media scales with your new content width, add this rule:

.entry-content img {
    max-width: 100%;
    height: auto;
}

This ensures that images will never exceed the width of their container, making them fully responsive.

3. Fixing the Static Front Page Width

When you set a static front page, Twenty Seventeen applies a unique one-column layout that can appear narrower than other pages. To widen the front page panels, use this specific CSS:

@media screen and (min-width: 48em) {
    .page-one-column .panel-content .wrap {
        max-width: 1000px; /* Your desired max-width */
        padding-left: 0;
        padding-right: 0;
    }
}

4. Creating Full-Width Pages

For individual pages where you want to remove the sidebar and use the full width of the screen, you must address the .has-sidebar class that the theme might add. The following CSS will force a full-width layout on pages without an active sidebar.

.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.no-sidebar #primary {
    float: none;
    width: 100%;
    max-width: none;
}

5. Troubleshooting Common Problems

  • CSS Not Working? Always add custom CSS to the Additional CSS section in the Customizer. Using a child theme's style.css is also recommended for sustainability, but ensure you are enqueuing it correctly.
  • Check for Specificity: The theme's default CSS is very specific. Using !important can sometimes be necessary to override it (e.g., width: 100% !important;), but use it sparingly.
  • Browser Cache: After making changes, always clear your browser cache and perform a hard reload (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) to see the changes.

By following these steps, you can successfully customize the width of your Twenty Seventeen theme to create a layout that better suits your content and design preferences. Remember to test your changes on different screen sizes to ensure a responsive design.

Related Support Threads Support