The default WordPress theme Twenty Seventeen’s content width can be easily changed to full width. All you need is this bit of CSS.

To make Twenty Seventeen full width in WordPress, add the following CSS to your theme’s CSS file, or in Customizer’s Additional CSS:

.wrap {
	max-width: 100%;
}
 
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 100%;
	}
}
 
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
	max-width: 100%;
}

@media screen and (min-width: 30em) {
	.page-one-column .panel-content .wrap {
		max-width: 100%;
	}
}

You can adjust the 100% values. Set these to 90% for example for a 90% main content width.


Want to say thanks?

If I’ve helped you out and you want to thank me, why not buy me a coffee?

If I’ve helped you out and you want to thank me, why not buy me a coffee?

Thank you for your support. ♥


Jan Reilink

My name is Jan. I am not a hacker, coder, developer, programmer or guru. I am merely a system administrator, doing my daily thing at Vevida in the Netherlands. With over 15 years of experience, my specialties include Windows Server, IIS, Linux (CentOS, Debian), security, PHP, WordPress, websites & optimization. Want to support me and donate? Use this link: https://paypal.me/jreilink.

25 Comments

Amelia Jones · 25 November 2018 at 20:47

Options for Twenty Seventeen plugin does a lot of this without modifying the theme or having to use CSS yourself https://wordpress.org/plugins/options-for-twenty-seventeen/

Shahin · 1 October 2018 at 06:48

Really its worked thanks a lot 🙂

Jerome · 28 July 2018 at 15:29

Now if only someone would provide a tip on how to do this on a single page.

    Daniele D. · 10 October 2018 at 11:48

    Hi. You can apply this modification just inserting the CSS tag “article#post-ID” before any .wrap or .page, where you need to set the page id number at the place of ID, like the example:

    article#post-7 .wrap {
    /* margin-left: auto; */
    /* margin-right: auto; */
    max-width: 100%;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
    }

    @media screen and (min-width: 48em) {
    article#post-7 .wrap {
    max-width: 100%;
    /* padding-left: 3em; */
    /* padding-right: 3em; */
    }
    }

    article#post-7 .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    max-width: 100%;
    }

    @media screen and (min-width: 30em) {
    article#post-7 .page-one-column .panel-content .wrap
    {
    max-width: 100%;
    }
    }

    To retrieve the ID number of the page, just go to modify the single page and look to its URL: the ID is the number after /post.php?post=
    In the following example, the ID is the number 7
    https://www.mywebsite.com/wp-admin/post.php?post=7&action=edit

Mike · 16 June 2018 at 04:50

THANKS I’S WORKING

Sam · 9 June 2018 at 13:54

Amazing. Thanks for that, worked like a treat. Much appreciated.

Igor · 2 May 2018 at 05:42

Is there a way to do CSS change for a fill width, but not for the whole website, rather just 1 page?

Sunday · 19 April 2018 at 00:45

This is brilliant but doesn’t quite get me where I need to be due to images. Is there maybe a way to keep the two-column format but make use of the first column? In other words, right now, column one is for nothing but the page title and the first footer while column two takes up a ton of scroll space holding all the copy. Is it possible to make column one hold the featured image while column two holds the copy?

GINes · 17 March 2018 at 20:20

Thank you for your solution!

Sascha · 9 March 2018 at 07:56

Hello,

very useful, thank you! It works very well for the content area 🙂

But the menu-bar will remain “shrunk” in case it contains lots of items. Could someone please provide a rule to add to the ones above that will also “strech” the menu-bar to full width?

Thank you so much guys and have a lovely day 🙂

    Geebro · 22 August 2018 at 04:02

    This will extend the size of the menu bar.
    .navigation-top .wrap {
    max-width: 99%;
    }

Erin Morey · 2 March 2018 at 16:02

Yay! Problem solved in like two seconds! I wish I would have stumbled across this post hours ago, lol! I was resigned to changing out my theme altogether (clearly I’m new at this), which I feel like would have been a nightmare, starting nearly from scratch just to get rid of the excess negative space! Thanks a million!!

Diana · 16 January 2018 at 11:05

THANK YOU! Other people kept advising to install widgets and it got too complicated. This is great!

Evert · 16 December 2017 at 23:51

Great. Simpel. That’s it. It works.

Dennis Foreman · 25 September 2017 at 04:29

Hi Janr!
This is a brilliantly easy solution for creating full width content pages in TwentySeventeen. I’ve chased this issue for two days and found several options that don’t work, or are too complex to implement.
Thanks greatly,

Dennis

Ali · 9 September 2017 at 18:01

Hi,
Thanks for sharing the useful information.

I have tried the code but it doesn’t change the width for Blog and Category pages although it worked for the rest of pages.
Can you please share the updated code?

Vincent · 7 September 2017 at 20:52

Hi Janr,
Thanks a lot for this piece of code, that’s exactly what I was looking for :))
Bye & thanks for sharing,
Vince

Pierre-Jean Perrin (french) · 16 August 2017 at 12:28

Hi,
In fact, there is still a problem : when you add an image on a page. If this image is more longer than the old width page, wordpress will be resize the image automatically.
For now, i didn’t found the solution.

Gabriela · 27 July 2017 at 05:10

Hi JanE, thank you very much for this piece of code, it has helped me a lot.
Do you know how I can do so that only the width of the main page was modified?

Cliff Mills · 10 July 2017 at 14:11

Hi, your solution comes close to what I need, but not quite. I am trying to make my pages one-column. The Twenty Seventeen theme currently has pages set to two columns, which wastes a lot of the space I want to use. Is there a way to keep the current page width, but convert the 2-columns to 1? Thanks!

WordPress 5.0 "Bebo" met Gutenberg uitgebracht - ITFAQ.nl · 30 December 2018 at 10:39

[…] Maak het standaard WordPress Twenty Seventeen full-width breed. […]

17 Valuable WordPress snippets you never knew you could live without - WordPress - Sysadmins of the North · 6 April 2017 at 11:57

[…] Psst, want to make Twenty Seventeen full width?! […]

Leave a Reply

Your email address will not be published. Required fields are marked *

21 queries, 0.248 seconds running PHP version 7.3.2