How To Make The WordPress Admin Content Editor Full Width Of The Screen

The content editor in WordPress often does not use the full width of the editor or screen to display content, and the content can wrap early. The content editor can be made full width and for the content to wrap on the very right margin.

The default width of content in the editor.

Note: This example and the snapshot from the editor is when using the Twenty Seventeen theme. The editor in other themes may look slightly different and the content may also wrap differently.

The content editor made full width of the screen.

Where and how to make the content editor full width of the screen:

  1. Make sure you are using a child theme for Twenty Seventeen, or your theme, on the server. Click here to learn how to create a child theme.
  2. The Twenty Seventeen WordPress admin uses its own CSS stylesheet which is on your server at WordPress Root > wp-admin > wp-content > themes >twentyseventeen > assets > css. The following instructions relate to that Twenty Seventeen stylesheet where the width of the content is defined for the WordPress admin content editor. Other themes may have a different location for this CSS stylesheet, so simply replace the location below with that of where your admin stylesheet location. If you can find your admin style sheet then use the comments section below or the Help link on the menu for support.
  3. On your server’s WordPress installation go to the WordPress Root > wp-content > themes > twentyseventeen-child and create a folder called ‘assets’. In that ‘assets’ folder, create another folder called ‘css’.
  4. Open your preferred text editor (I use EditPad Pro) and create a new text file and paste the following code into it.

    Add this CSS code:

    body {/* background-color: #fff; *//* color: #333; *//* margin: 20px 40px; */max-width: 100%;}

  5. Save the text file as editor-style.css and upload it to your server’s WordPress installation at WordPress Root > wp-content > themes > twentyseventeen-child > assets > css.Thank you to Dax for an update to the file where the code should be added.

That’s it.

Share this:

Comments

4 responses to “How To Make The WordPress Admin Content Editor Full Width Of The Screen”

  1. Dax Liniere avatar
    Dax Liniere

    Aaaactually, I just workout out the solution. I tried editing the parent theme’s style.css to add the max-width: 100%; line, and that also didn’t work. I then edited the theme’s editor-styles.css file and this solved the problem, so I suggest your article could be updated easily. :)

    Maybe you could email Medium.com as well so they can update their version of your article (that’s actually how I found that article first and later your website.)

    All the best,
    Dax.

    1. Bharat Karavadra avatar

      Dax, I’ve updated the post on my website and also the article on Medium, with your suggestion.

  2. Dax Liniere avatar
    Dax Liniere

    Hi Bharat, Is there an update for this for the twentyseventeen theme with WordPress 5.8.1? I tried this and was unable to get it to work, though I can manually change it in Chrome’s dev tools and it displays as expected.
    Any thoughts?

    Cheers!
    Dax.

    1. Bharat Karavadra avatar

      Dax, can you clarify what you are asking? Thank you.

Leave a Reply

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

>