Home » Genesis framework » How to make WordPress Gutenberg editor wider in Genesis Sample theme

How to make WordPress Gutenberg editor wider in Genesis Sample theme

Best WordPress hosting 2024

You probably noticed that content in WordPress editor becomes narrow – fills much less screen space than usual once you switch to Genesis Sample theme. It may not be a deal breaker, but it’s still not convenient if you’re using high resolution screen. Especially if you use multiple columns in pages or posts.

There are two ways to control how wide WordPress editor should in using Genesis Sample theme (or in most other themes built on Genesis framework):

I’ll show you both of them – feel free to use the one which fits your workflow best.

How to change WordPress editor width in Genesis themes

By default WordPress editor looks up for Gutenberg editor styling information in currently active theme’s files. Genesis Sample theme has some custom CSS for WordPress editor in it’s folders. So in order to change editor width we’ll need to edit one css file.

Go to Appearance >> Theme File Editor, and open lib >> gutenberg >> style-editor.css file in the editor.

make wordpress editor wider in Genesis Sample theme

To make default WordPress blocks wider you need to change .wp-block max-width to a larger number. For example, to 960px:

.wp-block {
   max-width: 960px;
}

You may also change wider or full width block maximum width:

.wp-block[data-align="full"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] {
	max-width: 1200px;
}

After saving changes WordPress editor content will be wider – no need to make any extra steps.

In the same css file you may change font sizes, change font family, and other WordPress editor elements to make sure that WordPress editor looks similar as your customized Genesis Sample theme.

Just a reminder – these settings won’t change Genesis Sample theme width for your site visitors. It’s only for site administrators. If you want to change genesis Sample theme width for site visitors, click here for tutorial.

How to completely remove theme styling from WordPress editor

If you don’t want WordPress editor to look like your WordPress theme, you may switch off theme styling in WordPress editor settings.

To do that open any post or page in WordPress editor. Click Options (three vertical dots) at the top right of the WordPress editor, and click Preferences.

how to disable theme styling in wordpress editor

In the popup window turn off Use theme styles setting.

disable theme styling css in gutenberg editor

Once you do that WordPress Gutenberg editor will use default theme styles – it won’t try to match your theme styling.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK