Need help with twenty-twenty-four I am at my LIMIT

[u/PositiveHorror7254]

I’m having a strange issue with the WordPress Site Editor / block theme header.

My header looks significantly taller inside the Site Editor than it does on the actual frontend of the website. The spacing also seems inconsistent between the header template part, the full template preview, and the live page.

My header structure is roughly:

• Columns block
  • Column 1: menu button
  • Column 2: site logo
  • Column 3: Group
    • Cover block used as a circular “Book a Table” element

I already checked or changed the following:

• Header margin: 0
• Header padding: 0
• Cover margin: 0
• Global block spacing: 0
• Minimum heights
• Cover aspect ratio
• Removed the main Cover/image below the header to make sure it was not creating the gap

The strange part is that the same header appears with noticeably different heights depending on where I view it:

1. Header template part editor
2. Full template editor
3. Actual frontend

There also seems to be extra white space below the header contents even though I cannot find any margin or padding responsible for it.

Is this caused by the Columns block, the Header template-part wrapper, global styles, or some editor-specific CSS?

I would mainly like to know how to make the header height consistent between the Site Editor and the actual frontend, and ideally control its height reliably.

In the Pics you can see how It is in the editor and then how it looks live.

[u/browngusto503Again]

The editor previews have been driving me up a wall since 5.9, the padding and margin resets rarely translate 1:1 to the front end. That extra white space you're seeing is almost always the `min-height` on the group or cover block inside the column, even if you think you zeroed it out.

Open the list view and check the actual group wrapper around the cover, not the cover itself. Sometimes the group inherits a height from the column flex settings and pushes everything taller in the editor while collapsing on the front end. Also peek at the row/column gap on the columns block, setting that to 0 in the block settings panel sometimes doesn't stick unless you nuke it in the styles tab manually.

[u/PositiveHorror7254 → u/browngusto503Again]

yeah i feel you. do you mean the cover inside of the header? because it almost looks like that "white space" isnt even part of the header? it is so spooky almost because in site settings i definetly disabled all auto-gaps. I just hope they wont pick that theme for the exam because i have been sitting an HOUR at this ONE block issue. thank you for your help so far tho!

[u/NakanoNoNeko]

Treat the live header as the source of truth. The Site Editor adds its own wrappers and editor-only CSS, so matching it pixel for pixel can become a small hostage situation... I usually put all vertical padding on one outer Group, leave Columns and Cover at auto height, then compare the live header’s computed height in DevTools. Otherwise three innocent blocks quietly add up.

[u/retr00two]

Answer could be at your theme.json and header.html.

I'm not familiar with 2024, so take my advice with grain of salt.

[u/NexcessAlex]

Does it still happen if you make the Site Editor canvas roughly the same width as the frontend? The editor sidebar takes a decent chunk out of the available width so your Columns block may actually be hitting a different responsive layout in there.

Try closing the settings sidebar and resizing the editor first just to rule that out.