Change the width of your content

In the WordPress Editor, you can control how wide the content (like images and text) will display on the page. This guide introduces the options and explains how to set the width of the content on your site.

Every block theme has a default content width, meaning that the theme determines how wide your text and images appear on the page. You can adjust the block width to one of three defined sizes:

• Content (or “None”): Sets the width of blocks to the theme’s default content area width (and you can change what the default value is).
• Wide width: Sets the width of blocks to a wider (but not full) width.
• Full width: Sets the block to fill the full width of the available area.

These width options can be found in the block toolbar that appears when you select certain blocks (like an Image block or a Columns block), under the Align option:

Follow these steps to change the width of a block:

1. Select a block by clicking on it, or use the List View to navigate to a specific container block like the Group block.
2. In the block’s toolbar, click the “Align“ icon:

3. Select the appropriate width: None, Wide, or Full.
4. Click the “Save” button to save your changes.

Watch the video below to learn how to change the width of your content.

If the Align option does not appear in the block toolbar, it is for one of two reasons:

• The block is inside another block that is controlling the width. Open List View to select the parent block that determines the width of the blocks inside it (the “inner blocks“).
• Not all blocks include content width options. Learn how to set the width of a block that doesn’t have the setting.

Blocks that can contain other blocks, like the Content, Group, Cover and Columns blocks, include an “Inner blocks use content width” setting to determine if the blocks inside the containers (“inner blocks”) match the width of their container or if they can be customized separately.

To adjust the “Inner blocks use content width” setting:

1. From your site’s dashboard, navigate to Pages, Posts, or Appearance → Editor. 
2. Click a block or use List View to select a specific block. 
3. In the block’s sidebar, locate the “Layout” section.
   • This layout setting will only appear if the block supports nesting content within it. Group, Columns, and Gallery are examples of blocks that support this option.
4. Click the toggle button for “Inner blocks use content width” to turn the setting on or off.

Watch the video below to learn how to adjust the content width of blocks within a parent block.

Some blocks do not have a setting to control the width. Examples include the Paragraph block and Custom HTML block. To change the width of these types of content, you can add them to a container using the Group block so you can set the width of the container.

Follow these steps to set any block to any width:

1. Click on your block or select multiple blocks by highlighting them with your mouse or by using List View.
2. Click on the ellipses (three dots) in the block’s toolbar.
3. Click the “Group” option to group the blocks (even if it’s just one block) into a container.
4. In the new Group block toolbar, click the “Align“ icon:

5. Select the appropriate width: None, Wide, or Full.
   • You may need to toggle the “Inner blocks use content width” setting to “OFF” in the Group block sidebar settings. This change ensures the blocks within a parent block use the full width of the parent block.
6. Click the “Save” button to save your changes.

Watch the video below to learn how to group blocks so that you can apply width settings to content that does not have the option by default, or a collection of blocks in one step.

The theme you select will have default width values for the “content” and “wide” settings. You can adjust these default widths for the entire theme.

This section of the guide applies to sites with our WordPress.com Premium, Business, and Commerce plans, and the legacy Pro plan. For sites on the Free or Personal plans, upgrade your plan to access this feature.

To customize the default width settings:

1. Visit your site’s dashboard. 
2. Navigate to Appearance → Editor.
3. Choose Styles in the sidebar.
4. Select the “Layout” option.
5. Under “Dimensions,” adjust the default width values for “Content” and “Wide” settings.
6. Optionally, adjust padding and block spacing.
7. Click the “Save” button to save the changes.