How To Make Twenty Seventeen Full Width Of The Screen (Both Content And Sidebar Areas)

December 19, 2016

The default Twenty Seventeen content area and sidebar use less than the full width of the screen, especially on a laptop or computer screen. The total width of these combined areas can use the full width.

The default width of the content area and sidebar.

The content area and sidebar made full width of the screen.

The full-width appearance should work throughout the site (e.g. single pages, single post & blog archives).

Where and how to make the width the content and sidebar areasĀ full screen:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

  • The two lines of code created the full-width effect for both mobile and computer screens.

The CSS code:

.wrap {
	/* margin-left: auto; */
	/* margin-right: auto; */
	max-width: 100%;
	/* padding-left: 2em; */
	/* padding-right: 2em; */
}
 
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 100%;
		/* padding-left: 3em; */
		/* padding-right: 3em; */
	}
}
 
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	max-width: 100%;
}

@media screen and (min-width: 30em) {
	.page-one-column .panel-content .wrap
	{
		max-width: 100%;
	}
}
Share this:
  • When we display a page on the “front page” how do we remove the page title that seems to sit in its own column taking up valuable screen space!

    • Hello Scott, in WP-ADMIN > Appearance > Customise >Theme Options there is a setting to make the general layout to use one column or two column. This is a site-wide setting. To do it specifically on one page such as the home page this would require some custom coding that you can get done by a freelancer on a site like upwork.com

      • Yes, I saw that, but as I say I’m a bit rubbish at the whole coding thing. In my Admin screen I either have the Appearance -> editor (which brings up a whole load of CSS or the Additional CSS box in the customise screen. When I try pasting it into the Editor nothing happens, that is why I think I’m pasting it in the wrong place within the editor. Is that possible? Many thanks and I’m loving your site!

  • Hello
    Would really love to get this to work, but it somehow only resizes the wrap and the navigation. I can see my site header (logo and site name) indeed moves to the left. Yet, the actual content of the page remains in a very narrow column. The above hack does not seem to resize the content area of the page. Am I doing something wrong?.. Thanks for any help

      • Hello Christophe.
        The code was working when in two column mode (set in WP-ADMIN > Appearance > Customizer > Theme Options) but not in one column mode. I have now updated the code to work also in one column mode. Thank you for pointing that out.

        • Thanks for your reply Bharat,
          I am indeed using the 1 column option. Sorry to ask, but are you sure you have updated the code ? Maybe I missed something, but it seems to be the same as previously ?… Still does not work for PAGES. Too bad. If you can assist in any way, this would be great…

  • This is fantastic! I’ve run into an issue. Making the site full screen messed up how my blog posts look. As I’m working in a staging site and reworking all my old posts anyway, I didn’t think it would be a problem to fix them. However, when I go to a post to rework it – the visual is still for default and not what appears when I preview it. Suggestions?

  • I try to set the 100% values to 80%, because want more width, but not 100%. When I put 80% value, it only works on some pages. It seems like it leaves 10% margin/padding on the left, and 20% margin/padding on the right.

  • Hi There, this code worked great except for the Home page where it seems to stretch wider than other pages. ( I would like them all to be the same size)

    • Andrew,
      I just tried it here and the width of the page appears the same for both the home page and other pages. Can you send the site URL and WP admin login details so that I can look into it?

  • it works but is there any way of doing the same with the menu because it feels weird for me having different margins for the menu and the content

  • Hello Bharat! Your blog it’s awesome. Thanks in advance.
    I was wondering how can I make the Images I upload to meet the Edges of the page?
    Thanks!

  • Hello, it’s great! I’ve changed my page but I would like to change the footer like before, smaller. Could you help me? Thanks

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >