Editor Compresses Content, Website Expands to Full Width

  • When I’m using the WordPress page editor, my content appears very narrow, as though there are large side margins. The content is as cramped as a mobile view, even though I’m on the desktop view. I’ve attempted to fix this with plugins, new themes, adjusting content group margins/padding, and changing templates, but the page editor still won’t display the site in full width, making it difficult to design. In the editor, all elements are bunched up, but in the website preview, they display correctly in full width. How can I get the editor to show the site in full width for proper editing?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Overall maximum content width is typically defined by your theme. It would appear this is set too low; however, if the problem persists regardless of theme, there may be excessive padding or margin settings within your post content of which you’ve yet to find.

    I suggest using your browser’s element inspector tool to find out what CSS rule is enforcing this undesirable layout. The tool will reveal where various rules are coming from. The source of the offending CSS rule will be a strong hint towards where to look to resolve the problem.

    If you are able to locate the offending CSS rule but are unable to alter it for some reason, you can likely override it with your own custom editor styling rules you would add yourself.

    Thread Starter evas9

    (@evas9)

    It doesn’t seem like I can adjust the editor by changing the padding or the margins within the page editor. To my knowledge, there is nothing that I have changed within the editor to make the margins so wide. I have checked all of my content and I cannot adjust the side margins in any way. This seems to be the default with multiple themes that I have applied. Checking the CSS didn’t help because I could not find the class that controls my margins. It is tough to edit my site since the editor view looks different than the preview. Here is a screen recording demonstrating my problem: https://drive.google.com/file/d/11HULeN7MswhXgarISXrMqBZr9LJLdlB5/view?usp=sharing

    Moderator bcworkz

    (@bcworkz)

    Can you determine what the content width is within the page editor (use your browser’s element inspector tool)? If it’s around 620px, then it is set by your theme’s theme.json file. There is also a wide format specification for 1000px width. I’m not sure how to invoke the wide format. For that I suggest asking in your theme’s dedicated support forum.

    If you prefer a wider default content width, you could create a child theme and specify your preferred "contentSize": width in the child’s theme.json file. If you do this, you might need to flush any caches involved to ensure your browser gets the latest CSS rules.

    If the theme specifies 620px content width, you may ask how the preview width is then wider than that. It’s possible to override the default through individual block style settings. It looks like the wider elements are set to be 70% of the viewport width instead of the default fixed 620px or 1000px.

    You might also ask why the same narrow editor width appears with other themes. I couldn’t say for sure without knowing the themes involved, but the 2024 model theme uses 620px as well, so it’s not too surprising other themes adopt the same content width as the model theme.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.