How to Make Full-Width Content in the WordPress

25.04.2025

Introduction

The Twenty Twenty-Two theme, part of WordPress’s default theme lineup, is built using the modern Full Site Editing (FSE) approach. While this brings a lot of flexibility, it also introduces some layout limitations that may not be immediately obvious. One such limitation is that content is not full-width by default, even when you want it to be.

In this article, I’ll show you a simple fix using the theme.json file to allow your content to span the entire width of the screen.

Why Does This Matter?

In many design scenarios, you want your content to stretch from edge to edge, especially when using blocks like Cover, Gallery, or full-width Images. Without this adjustment, your site can look cramped and constrained.

One of the most noticeable issues with the default layout settings is how they behave on mobile devices. The built-in padding adds unnecessary margins around your content, making it appear squeezed and significantly reducing the usable screen space. This affects the readability and overall aesthetic, especially on phones with smaller screens. If you want your site to look clean and professional on mobile – adjusting the layout is essential.

There are screenshots with 85% of Layout: Inner blocks use content width Nested blocks use content width with options for full and wide widths. In my case:

Content width = 85%
Wide width = 85%

Update Layout Settings

Use the Site Editor (Visual Method) do next steps:

In the top left, click Document Overview button
Select the root block. In my case it is Query Loop block
In the top right, click style button
Click Layout link

Set the content width and wide width to 100%
Click Settings button, turn Inner blocks use content width switcher ON and set 100% for content width and wide width too

You can see difference in the width, but only inner block content width

This approach is perfect if you’re using a block theme like Twenty Twenty-Two and want a no-code solution to control your layout.

Adjust Outer Spacing

Edit theme.json via the Theme File Editor (No FTP Needed) If you’re not using an external code editor or FTP access, WordPress provides a built-in tool:

Navigate to Tools → Theme File Editor.
On the right-hand side, find and click on theme.json.

Find code block:

"custom": {
	"spacing": {
		"small": "max(1.25rem, 5vw)",
		"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
		"large": "clamp(4rem, 10vw, 8rem)",
		"outer": "var(--wp--custom--spacing--small, 1.25rem)"
	},

In this case we see two main rows for next variables which need be edited:

--wp--custom--spacing--outer
--wp--custom--spacing--small

Cnahge rem and vw values to zero (0) and click update file.

"custom": {
	"spacing": {
		"small": "max(0rem, 0vw)",
		"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
		"large": "clamp(4rem, 10vw, 8rem)",
		"outer": "var(--wp--custom--spacing--small, 0rem)"
	},

Large and Medium values still old settings and not modify.

You can see message: File edited successfully, reload the page, if needed, clear cache.

In this case you need set up internal spaces using Padding and Margin values of your blocks. I managed it and now my site fit 100% width of my phone:

Note: If you’re using a caching plugin like W3 Total Cache or similar, you may need to clear the cache after making changes. Otherwise, updates – especially to layout or text content – might not appear immediately on the front end of your site.

If everything worked correctly, your content should now span the full width of the screen – 100% – on both mobile and desktop devices. While this looks clean and modern on mobile, it can appear too wide on large desktop screens. For a more polished layout, it’s recommended to adjust the layout width from 100% to a fixed maximum value, such as 1200px. This way, your site will have a centered and compact appearance on desktop while still retaining an edge-to-edge look on mobile, without side padding or gaps.

Final Layout Recommended Settings

Layout: Set both Content width and Wide width to 1200 pixels.
The root Query Loop block should have the layout switch enabled (in the Layout section), but leave the specific width values empty – this will automatically inherit the global layout width (1200px in this case).
In this example, all other inner blocks should have the layout switch turned off, so they follow the parent block’s layout.

Additional margin and padding values can be customized based on your personal design preferences.

Conclusion

With just two simple modifications in your theme.json file, you can easily remove width restrictions in the Twenty Twenty-Two theme and make your content full-width, significantly improving the visual experience of your site. This is especially useful for landing pages, portfolios, or any visually rich layout.

If you’re working with FSE, don’t be afraid to edit theme.json – it’s a powerful tool that gives you control over many aspects of your theme without the need for CSS hacks.

Wordpress