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

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:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.


Posted

in

by


Comments

42 responses to “How To Make Twenty Seventeen Full Width Of The Screen (Both Content And Sidebar Areas)”

  1. Bharat Karavadra avatar

    Can you use the Help link on the top menu to send me your WordPress admin URL and admin login details so that I can look into it?

    1. billy avatar

      what if it’s a SINGLE COLUMN site? thanks Bharat

      1. Bharat Karavadra avatar

        Hello billy,
        I just tried the CSS code here and it works on a single layout.

  2. Guadalupe avatar
    Guadalupe

    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

    1. Bharat Karavadra avatar

      Guadalupe, Can you clarify what you mean by you wanting to make the footer like before?

      1. Guadalupe avatar
        Guadalupe

        Hello Bharat, I would like to narrow the footer because with this change it’s very wide. Thanks!

        1. Bharat Karavadra avatar

          Hello

          Try putting #content before the first two .wrap tags so the first part of the code becomes:

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

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

          1. Guadalupe avatar
            Guadalupe

            Thank you but It’s not work :(

            1. Guadalupe avatar
              Guadalupe

              Thank you, I’ve able to change the css!

  3. Lucas avatar
    Lucas

    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!

    1. Bharat Karavadra avatar

      Lucas,
      Thank you for the feedback. Can you clarify which uploaded images you are referring to? Featured images, uploaded images to posts or pages, etc.

  4. juritobi avatar
    juritobi

    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

  5. Andrew avatar

    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)

    1. Bharat Karavadra avatar

      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?

  6. oyvind2017 avatar
    oyvind2017

    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.

    1. Bharat Karavadra avatar

      Hello,
      I just tried it with 80% here and it works OK. Can you send me the address of your site and also the admin username and password, using the Help on the top menu, so that I can look into it?

      1. oyvind2017 avatar
        oyvind2017

        Its working here too, now. I replaced the whole CSS again. Think I messed up something when I copied and pasted here and there.

        1. Bharat Karavadra avatar

          Hello,
          I am glad the code worked.

  7. Jeanette avatar

    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?

    1. Bharat Karavadra avatar

      Hello Jeanette,
      I am assuming that when you are in the admin content editor, the content in the editor wraps early and so does not give a full width preview. If so see here https://karavadra.net/make-wordpress-admin-content-editor-full-width-screen/

  8. Frenk avatar
    Frenk

    Works great, Bharat. Thanks a lot!

  9. Christophe avatar

    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

    1. Christophe avatar

      CORRECTION : IT seems to work, but only for blog posts. Does not seem to work for the hopeage and for pages. Did I miss something ?

      1. Bharat Karavadra avatar

        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.

        1. Christophe avatar

          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…

          1. Bharat Karavadra avatar

            Christophe,
            I don’t think I update the post when I sent you a reply. The updated code should be there now.

          2. Christophe avatar

            Bharat, you are a STAR.
            Thanks for this quick update. I’ll try that asap. Thanks for your tips. C

          3. Christophe avatar

            Thanks Bharat. We are getting closer. It works fine for the pages. However it still does not seem to work for the HOMEPAGE (I use the static page option, with the blocks). I guess this page uses a specific class…
            I shall try to review when I have a chance….

            1. Bharat Karavadra avatar

              Christophe,
              Try the update code.

          4. Christophe avatar

            Hi Bharat, seems to be working. Thanks !!
            Let me play around bit with this code, as it looks good on mobiles (phone & ipad), but 100% seems a bit large on large monitors. I guess I need to play around with the “@media screen and (min-width: XXem)” and the “max-width: XXXpx !important;” to target only the required screen dimensions… Thanks for your great help.

  10. matthulland avatar

    Hi Bharat, I’m really love this buy am struggling to make it work. Where exactly do I enter the code?

    1. Bharat Karavadra avatar

      Hello, as it says above, the code goes in…
      In WordPress Admin > Appearance > Edit CSS.
      Copy and past the code there and then click on the blue ‘Save & Publish’ button at the top.

      1. matthulland avatar

        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!

        1. Bharat Karavadra avatar

          Hello,
          Can you send me you WordPress admin URL, login username and password. Use the “Ask For Help” link on the top menu.

  11. Manja avatar

    Now to make Navigation also full width?

      1. Manja van der Storm avatar
        Manja van der Storm

        Thanks, it really works!

    1. Manja van der Storm avatar
      Manja van der Storm

      Is it also possible to make a page full width?
      Text beneath the title, etc.
      Now the page is only half…

    2. Bharat Karavadra avatar

      Hello Manja, the code for the numbered navigation links are contained within the main content area block over various theme template files. I tried moving them out but that then disturbs the layout of the footer. This will require quite a bit of custom coding and I believe it is best to leave the navigation as it is under the main content area as if the sidebar content was higher than the main content area then the navigation links would be quite low on the page and that is why the code seems to be as it is.

  12. Scott avatar
    Scott

    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!

    1. Bharat Karavadra avatar

      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

Leave a Reply to Christophe Cancel reply

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

>