How to make Twenty Seventeen theme full width in WordPress


GamesGames

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%;
	}
}Code language: CSS (css)

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

foto van Jan Reilink

About the author

Hi, my name is Jan. I am not a hacker, coder, developer or guru. I am merely a systems administrator, doing my daily SysOps/DevOps thing at cldin. With over 15 years of experience, my specialties include Windows Server, IIS, Linux (CentOS, Debian), security, PHP, websites & optimization.

0 0 votes
Article Rating
Subscribe
Notify of
36 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
1 year ago

Great! Imagine, just searching for an issue, getting answer in just some seconds, copy the CSS-code into the settings, and, voila, fixed!

WordPress is amzing! Thank you!

Best regards Joacim, westernfront.se

Mags
2 years ago

This is great, but for me in my blog it doesn’t enlarge the size of the images to fill the new width of the text.

Is there some way of expanding the width of the images too?

2 years ago

Hi Jan, Your tip for the full widt worked great but I have anoter question..
I would like to shrink the width of the ‘page name’ so that my widget section on the right becomes bigger.

Is that possible?

Kind regards, Frederic

Deepak
3 years ago

Thanks for such an awesome tip. It really worked for my website.

3 years ago

What an excellent tip, thanks!
How would I move the menu titles to the left, so that they match up with my site title?
Cheers

3 years ago

Oh my goodness, thank you so much for this. The narrowness of the content presentation was getting on my nerves. I changed “twentyseventeen” to “twentynineteen” and it did just what I wanted it to. Thank goodness.

3 years ago

Thanks, very helpful :)

3 years ago

I am having an issue on an evolve them website where the content is appearing squished and centered, how can I fix this?

3 years ago

Thank you so much! You are blessed!

Marcelo Midaglia Resende
3 years ago

Tanks a lot my friend!

4 years ago

Thanks for this nice post. …

Amelia Jones
4 years ago

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
4 years ago

Really its worked thanks a lot :)

Jerome
4 years ago

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

Reply to  Jerome
4 years ago

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
4 years ago

THANKS I’S WORKING

Sam
4 years ago

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

Igor
4 years ago

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

4 years ago

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?

5 years ago

Thank you for your solution!

Sascha
5 years ago

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
Reply to  Sascha
4 years ago

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

Erin Morey
5 years ago

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
5 years ago

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

5 years ago

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

5 years ago

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
5 years ago

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?

5 years ago

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

5 years ago

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
5 years ago

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?

5 years ago

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!

Reply to  Jan Reilink
5 years ago

Hi JANR,
Is it possible to set the “posts” to one column?

Farhan
Reply to  Khürt Williams
4 years ago

Put these codes in style.css file

#primary .entry-content {
width: 100% !important;
}

36
0
Would love your thoughts, please comment.x
()
x