Twenty Seventeen Theme Customisation
Twenty Seventeen is the default 4.7 WordPress theme for 2017. Subscribe to and request customisations here.

How To Make The Content And Sidebar Areas Fit Full Width Of The Screen In Twenty Seventeen

Updated: February 9, 2017 Posted: December 19, 2016~ 1,984 Readers ~ 1 Minute Read 21 Comments >>


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:

This Customisation Is Free For Subscribers

Subscribe to immediately use this and other Twenty Seventeen theme customisations, and also receive future customisations by email.

Free customisation support is only avalable for a limited period. 

Your privacy is respected, and there is no spam.

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:


There are 21 comments to the above post.

Click here to Post your comment, question, share, or answer.


About Bharat Karavadra

I Help You To... >Transform Life Situations. >Grow Businesses Online. >Kickstart & Deliver Projects. >Create Vocation & Habitation.

21 Comments

  • Frenk says:

    Works great, Bharat. Thanks a lot!

  • Christophe says:

    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

    • Christophe says:

      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 ?

      • 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.

        • Christophe says:

          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…

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

          • Christophe says:

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

          • Christophe says:

            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….

          • Christophe,
            Try the update code.

          • Christophe says:

            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.

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

    • 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.

      • 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!

  • Manja says:

    Now to make Navigation also full width?

  • Scott says:

    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

Comment / Ask / Share / Answer Something...

Do NOT follow this link or you will be banned from the site!
%d bloggers like this: