Ollie Layout Broken: Saved Templates, theme.json Widths and Stray CSS

Where the damage shows tells you where to dig

Before opening the Site Editor, map the damage. The scope of a layout fault on a block theme points at its source more reliably than any amount of clicking, and the general guide to broken theme layouts explains the same logic for classic themes.

• One post or page only: that page's own blocks, a pattern inserted into it, or a setting on one block.
• Every post, or every page, but not both: the template behind that content type, usually its saved database copy.
• Every page, after a style change: Global Styles, a style variation switch or the layout widths.
• Phones or tablets only: a responsive override from WordPress 7.1, or Ollie's mobile rules meeting your own CSS.
• One plugin's output only, such as a form or a cart: that plugin's stylesheet colliding with the theme.

Four places an Ollie page gets its shape

Ollie also adds two templates to the page Template menu, Page (Full Width, No Title) and Page (With Sidebar), and registers a Sidebar template part area. A page assigned to the wrong one can look broken while being exactly what its settings ask for.

Likely causes on an Ollie site, with a test for each

1. A saved template copy is frozen in time

This is the block-theme failure classic-theme owners never meet. Someone tweaks the single post template once, and that edited copy is kept in the database. A later Ollie release rewrites the file, as 1.3.4 did when it moved page templates onto patterns, and your site never sees the change. The reverse also happens: one careless edit to a shared template breaks every post at once. Check: Appearance, Editor, Templates. A template you have customized offers a Reset action in its menu (older WordPress versions call it Clear customizations). Note which ones have it.

2. The widths moved in Global Styles

Content width and wide width are site-wide settings under Styles, Layout. Changing 740 to 1200 makes paragraphs run uncomfortably long; switching a style variation can change spacing and type scale at once. Check: open Styles and click the clock icon for revisions, as Ollie's docs suggest, then step back to the version before the problem.

3. A pattern landed inside a narrower container

A pattern set to full width cannot escape a parent group that constrains its children. Inserted into a group whose inner blocks use the content width, it stops at 740 pixels. In a post, Ollie's default centered post template holds the content in a wide-aligned area, so a full-width pattern there stops at the 1260-pixel wide width. Check: select the block and open List View. Walk up the parents and look at each Group's layout settings, including the Inner blocks use content width toggle.

4. A tablet or mobile override from WordPress 7.1

WordPress 7.1 lets any block carry separate styles for Tablet and Mobile, with defaults of 782 pixels and below for tablet and 480 and below for mobile. Ollie 1.6.3 keeps those defaults. Ollie Pro, by its own docs, retired most of its per-device controls in favor of core's, migrating settings automatically. A padding or width set while the editor was in Mobile view affects phones only. Check: switch the editor's device preview to Tablet and Mobile and inspect the block's styles in each.

5. Plugin CSS meeting Ollie's block styles

Ollie styles core blocks and form controls closely, and plugins bring their own rules. One support thread showed Ollie's styling stretching a Forminator consent checkbox across about 90 percent of its row. Optimizers that remove unused CSS can also drop Ollie's per-block files, because they load only when a block appears. Check: inspect the misplaced element and read which stylesheet sets the offending rule, then test with the optimizer's CSS features off. The slower test is in theme and plugin conflicts.

6. The design was saved under a different theme

Template edits and Global Styles are stored against the theme that was active when they were made. Activate an Ollie child theme after customizing and the site falls back to file versions and default styles. Check: Appearance, Themes. If a theme switch preceded the problem, this is it.

Putting an Ollie layout back, step by step

1. 1

   Back up and copy to staging

   Database copies of templates are the thing you may reset, and a reset cannot be undone without a backup.

2. 2

   Note the scope

   One page, one content type, every page or phones only. The scope picks which of the steps below matters.

3. 3

   Compare saved templates with Ollie's files

   For each customized template behind the broken pages, decide whether your changes are worth keeping. If not, Reset it to Ollie's current file. If so, rebuild the edit on a fresh copy of the file.

4. 4

   Restore Global Styles

   Use the Styles revisions to return to the last good state, or set content width back to 740px and wide width to 1260px.

5. 5

   Fix the container, not the pattern

   In List View, move a misbehaving pattern out of its constraining parent, or change that parent's layout, instead of adding custom widths to the pattern.

6. 6

   Clear device overrides

   Check Tablet and Mobile views for any block that looks wrong only on small screens, and remove styles set there by mistake.

7. 7

   Isolate plugin CSS

   Turn off CSS optimization, then plugins one at a time on staging. Write a scoped override for a genuine clash, like the Forminator checkbox, in Additional CSS.

8. 8

   Purge and verify

   Clear every cache, then check a post, a page, an archive and the home page at desktop and phone widths.

If a theme update caused the break and the steps do not settle it, the guide to a theme that broke after an update explains rollbacks. A shop page out of shape has its own causes, covered in WooCommerce layout broken, since Ollie filters WooCommerce's templates and patterns with its own.

Customizing Ollie without trapping the next update

• Change the look through Global Styles first, patterns second and templates last. Every template you edit is one that stops receiving Ollie's fixes.
• Keep a short list of customized templates and why each was changed, so the next update can be checked against it.
• Set block widths with alignment and layout settings rather than pixel values in custom CSS.
• Pick a child theme, if you want one, before you touch the Site Editor.
• After each Ollie or WordPress release, check one page of every template type at desktop and phone widths before calling it done.

When an editor and the live page disagree, start with block editor not matching the theme. Ollie's other common problems are phone menus and fonts; speed is covered in the Ollie speed guide, and the Ollie review sums up the theme. For hands-on design fixes, see our theme customization service. More problems, theme by theme, sit in the troubleshooting library.

When the layout has too many owners

A block theme fixed much of what made WordPress layouts fragile. Ollie has no page builder, no Customizer panel and no generated CSS file to go stale. It still keeps the design in four places, two of them editable by anyone with an admin login, and a database copy can silently outvote the theme for years. That is fine for a site that changes twice a year. It wears thin on a site that changes every week.

In a Next.js build, templates are code in one repository, reviewed and tested before release, and editors fill in content rather than editing the page frame. The trade is a higher up-front cost and a developer for structural change. Ollie vs Next.js sets out both sides, and Ollie to Next.js explains the move, with editing afterward in Athena CMS. If you would rather keep Ollie, our theme repair team resolves template and style conflicts on staging first.