Twenty Twenty-Four Layout Broken: Narrow Columns, Lost Site Editor Work and Templates That Override Each Other

Squeezed, stacked or reverted: three different breakages

Owners use the word broken for three different pictures. Sorting yours into the right one saves trying fixes that cannot work.

A fourth picture, sideways scrolling on phones or a sidebar dropping under the content, has causes shared by every theme, from oversized embeds to unclosed HTML. Those are covered in the general layout troubleshooting guide and themes that stop being responsive.

The measurements Twenty Twenty-Four builds every page on

Open the theme's theme.json and the layout is three numbers. The content width is 620 pixels. The wide width is 1280 pixels. The side padding of the whole site is min(6.5rem, 8vw), which tops out at 104 pixels on each side of a large screen and shrinks on phones. It also enables useRootPaddingAwareAlignments, which lets a full-width band touch both screen edges while the text inside it stays clear of them.

That 620-pixel column is deliberate. It is a comfortable line length for reading, and it is why the theme's Writer layouts look right. A business page that lays three service cards side by side at Align: None gets three cramped cards. The theme did not break; the block asked for the narrow lane. The Twenty Twenty-Four review discusses that trade.

Six causes, most common first

1. Blocks left at the content width

Check: select the squeezed Columns or Group block and look at the alignment control in its toolbar. None means 620 pixels. Choose Wide width for grids and Full width for bands. If every page should be wider, change the Content width once in Styles, Layout rather than block by block.

2. A Group that passes the narrow width to its children

Groups have a Layout setting that makes inner blocks use the theme's content width. Switched on inside a wide or full section, it shrinks everything inside back to 620 pixels. Switched off, children spread to the Group's full width. Check: select the parent Group and review its Layout panel in the Settings tab.

3. The wrong custom template

Page with Wide Image puts a wide featured image on top, then two columns: the title on the left, the content on the right. Page with Sidebar adds a sidebar part. Both are reasonable designs, and both look broken on a page that expected one centered column. Check: open the page in the editor; the Summary panel shows which template it uses.

4. A child theme that started from the theme files

Everything changed in the Site Editor, templates, template parts and Styles including widths, is written to the database under the active theme's name. A support thread on this theme describes the result of activating a child theme afterwards: none of the modified templates or parts carried over. The site falls back to the files. Check: Appearance, Themes. If a child theme is active, switch back briefly; if the layout returns, this is your cause.

5. A database template overriding the file you edited

WordPress gives a template saved in the Site Editor precedence over the theme's template file. Developers who edit templates/page.html in a child theme, and see nothing change, are usually looking at that rule. Check: in Appearance, Editor, Templates, a template you customized shows a Reset option in its three-dot menu. If it does, the database copy is the one being served.

6. Template files copied from an older version

A child theme that copied the parent's templates in 2023 keeps those copies forever. The parent has shipped releases since, up to version 1.6 in August 2026, and its fixes stop at the child's copies. Check: compare the child's templates folder with the current parent's; delete any copy you did not intentionally change.

Putting the layout back in order

1. 1

   Back up first

   Take a full backup including the database, where your templates, parts and global styles live.

2. 2

   Fix widths at the right level

   For a site-wide change, set Content and Wide in Appearance, Editor, Styles, Layout. For one section, set the block's alignment to Wide width or Full width.

3. 3

   Check each Group's Layout toggle

   Inside full-width bands, turn the inner content width setting on for text and off for grids that should span the band.

4. 4

   Assign the intended template

   Under Summary on the page, switch from Page with Wide Image or Page with Sidebar to the default Pages template if a single column was wanted.

5. 5

   Recover work stranded on the parent

   If a child theme caused a reversion, reactivate the parent, then carry the changes across with a tool built for it, such as the Create Block Theme plugin's Create Child Theme or Save Changes to Theme options.

6. 6

   Decide which template copy should win

   If a file edit is being ignored, use Reset on that template to drop the database copy. If the database copy is the good one, leave it and stop editing the file.

7. 7

   Test at three widths

   Check a phone, a tablet and a 1440-pixel laptop, logged out, after purging caches. Turn on Stack on mobile in any Columns block that crowds the phone view.

A broken layout often comes with a missing header, since both live in templates; see Twenty Twenty-Four header not showing. If the phone menu also changed, Twenty Twenty-Four mobile menu not working covers it.

Child themes on a block theme: when, and how

On a classic theme, a child theme is cheap insurance. On Twenty Twenty-Four it is a migration, because the valuable customizations are in the database under the parent's name. That does not make child themes wrong. It means creating one is a planned job: export first, switch on staging, compare page by page, then switch live.

Most owners do not need one at all. Additional CSS, Styles and templates edited in the Site Editor all survive parent updates. Code tweaks, such as preload hints, belong in a small site-specific plugin, as the Twenty Twenty-Four speed guide recommends. A child theme earns its keep when a developer needs version-controlled template files, and then it should be created with the Site Editor work already exported into it.

On a block theme, the design lives in the database under the parent's name. A child theme starts with an empty wardrobe.

Layout habits for a long-running default theme

• Pick alignment deliberately: None for reading, Wide width for grids, Full width for bands.
• Change global widths in Styles, Layout once, instead of patching sections one at a time.
• Keep custom templates few and named for what they do.
• Never activate a child theme on the live site without exporting Site Editor work first.
• After each WordPress release, look at three key pages at phone, tablet and laptop widths.

Layouts that broke on update day, with nobody editing, call for a careful theme rollback. When the editor shows one layout and the site another, check block editor not matching the theme. Our hosting and maintenance plans run that three-width check after every update.

When the database is the design

Twenty Twenty-Four is light, maintained and sensible. Its layout system is clean. What makes it fragile is a WordPress choice, not a theme one: the design of your site lives in database records tied to a theme name, editable live, with files underneath that sometimes win and sometimes lose. That is easy to live with for a portfolio and hard to live with for a business with several editors.

A Next.js site keeps layout in code, versioned and tested before deploy, and editors change content in fields rather than rearranging templates. It costs more up front and needs a developer for structural changes. The comparison is in Twenty Twenty-Four vs Next.js and the route in moving Twenty Twenty-Four to Next.js. For everything else, the troubleshooting hub has more fixes, and layouts stranded on the parent theme are routine work for our theme troubleshooting team and repair service.