Why is the visual editor in WordPress limiting the width by wrapping the content?

1 comment

1. Hazarding a guess at what you really mean, I suppose you mean something like this is happening:

   

   If that is what you’re referring to, that’s because your theme has an editor-style.css stylesheet that’s getting used in the visual editor. Somewhere inside that stylesheet is something like this:

   html .mceContentBody {
       max-width:640px;
   }
   

   Removing that or modifying the max-width value will let you customize that. The other option is to remove the stylesheet altogether. To do that, find this line of code in your theme (probably in functions.php):

   add_editor_style();
   

   and remove it.

   If this was not at all your problem, I apologize and would love some clarification.

   EDIT

   Since it looks like WordPress loads your stylesheet before it loads the template stylesheet, there are two ways to override styles. First (and easiest): make your style important:

   html .mceContentBody {
     max-width: none !important;
   }
   

   To stop the editor from loading the parent styles at all, you could add this to your theme’s functions.php file:

   function get_rid_of_editor_styles(){
     global $editor_styles;
     if(is_array($editor_styles))
       foreach($editor_styles as $e)
         $e = 'editor-style.css' == $e ? '' : $e;
   }
   add_action('init','get_rid_of_editor_styles');
   
   function add_my_own_editor_styles(){
     add_editor_style( 'custom-editor-style.css' );
   }
   add_action('after_setup_theme','add_my_own_editor_styles');
   

   Then in your child theme, use custom-editor-style.css as your child theme’s editor stylesheet instead of editor-style.css.

   Please note, this last part of the answer would not be the best solution for everybody. I’m only offering it because I know that you are using a child theme using twentyten as the template.

   Log in to Reply