Back to Community
Home / Community / Theme → Twenty fourteen

How to Achieve a Full-Width Layout in Twenty Fourteen

54 threads Sep 10, 2025 Theme → Twenty fourteen

Content

Many users of the Twenty Fourteen theme report a common challenge: they want their site's content to span the full width of the browser window. The default layout includes margins and sidebars, which can leave unused space on the sides. This guide will explain why this happens and provide the most effective solutions to create a true full-width design.

Why Isn't My Twenty Fourteen Site Full Width?

The Twenty Fourteen theme was designed with a fixed maximum width for its main content container and structural elements. This is not a bug but an intentional design choice to maintain readability and a consistent structure across different screen sizes. Common user goals include:

  • Making the main content area wider.
  • Extending the header image to the full screen width.
  • Creating a full-width footer.
  • Ensuring WooCommerce pages or other plugin pages use the full width.
  • Fixing a 'ghost' sidebar that appears on wider screens.

Common Solutions for a Full-Width Layout

1. Using a Child Theme and Custom CSS

The safest and most recommended method is to use a child theme. This ensures your changes are not overwritten by theme updates. Add the following CSS to your child theme's style.css file or through the Customizer's "Additional CSS" section.

Make the Entire Site Container Full Width:

#page {
    max-width: none;
}

#masthead {
    max-width: none;
}

.site {
    max-width: 100%;
}

Widen the Main Content Area:

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    max-width: 100%; /* Change from the default 474px */
    margin: 0 auto;
}

Fix for Full-Width Featured Images:

.wp-post-image, .post-thumbnail img {
    width: 100%;
}

Remove Sidebar Margin for Full-Width Page Template:

.full-width .site-content blockquote.alignleft,
.full-width .site-content img.size-full.alignleft,
.full-width .site-content .wp-caption.alignleft {
    margin-left: 0; /* Change from the default -168px */
}

2. Addressing the 'Ghost' Sidebar on Wider Screens

When using a full-width page template, a blank sidebar space might appear on larger screens. To hide it completely, use this CSS:

@media screen and (min-width: 1000px) {
    .full-width .content-area {
        width: 100%;
    }
}

3. Troubleshooting WooCommerce and Other Plugin Pages

Pages generated by plugins like WooCommerce may have their own styling. To target them specifically, you may need more specific CSS selectors. For example, to target WooCommerce product tag pages, you might need to use a browser inspector to find the correct body class and apply full-width styles to it.

Important Considerations

  • Responsiveness: Widening elements can sometimes break the theme's responsive design on mobile devices. Always test your changes on different screen sizes.
  • Image Quality: Stretching images to full width will work best if the original images are large enough to avoid looking pixelated.
  • Browser Tools: Using a browser tool like Firefox's Firebug or Chrome's Developer Tools is invaluable for testing CSS changes in real-time before adding them to your site.

By following these steps, you can successfully modify your Twenty Fourteen theme to achieve the full-width layout you desire while maintaining the stability of your site.

Related Support Threads Support