Extra space between header blocks

Hi @hblecher,

Tove applies default vertical margins to blocks, and unfortunately there’s no intuitive way to modify those margins within the editor interface right now. Tove does include classes that you can add to blocks to remove those margins, though.

The classes are:

no-margin
no-margin-horizontal
no-margin-vertical
no-margin-bottom
no-margin-left
no-margin-right
no-margin-top

Applying the no-margin-bottom class to the columns block wrapping your site logo should do it.

— Anders

Thank you! That definitely helped. Unfortunately, as with so much, it seems to have created a new problem. I also applied the no-margin-bottom class to the navigation block, in an effort to get the social buttons block to move up a bit, and it changed all the spacing between the navigation links. I can’t show you what it used to look like, since I can’t seem to get it to revert, but you’ll notice now that the navigation links are pretty far apart from one another, and I’d like to have them return to how they were previously, which was just closer together. I tried putting them in a column block to squeeze them from the outside, but instead of changing their spacing, it just caused them to shift down to new lines when the outer columns were over a certain percentage of the full width.

The other issue is that the no-margin-bottom class didn’t seem to work on the navigation block, so the social buttons are still quite far down.

I really appreciate the assistance. Thanks again.

Hi @hblecher,

It looks like the menu items have been set to have a background color, which results in Core applying extra padding to them. If you remove that background color, the menu items should revert to their previous spacing.

Yeah, the navigation block has a vertical margin on a child element (which the custom class is not applied to), so the class can’t be used on those. It’s part of the Tove styles, so I’ll see if I can find a better solution to that in a future update.

A fix for now would be to set the social links block to no-margin-top, which will reduce the margin between the navigation and the social links a bit.

— Anders

• This reply was modified 3 years, 1 month ago by Anders Norén.

Wonderful! Thank you, both of those suggestions helped.

Hi Anders,

I noticed what might be a bug that I wanted to bring to your attention. The fix you offered above worked great in chrome, but I’m noticing in Safari that there is no spacing between the navigation links. I tried adding in a background color to see if that would change anything, but safari renders them the same either way. It’s no biggie for me since most of the traffic I get is via chrome, and the nav is still useable in safari this way, but thought it was worth mentioning in case you didn’t know.

Thanks again for all your help.

Oh and I just noticed, the post content margin fix in 0.2.2 doesn’t seem to change anything in Safari either. Maybe this is just a known problem with the way blocks work in Safari, but again, thought I’d mention it.

I’ve also noticed that since 0.2.2 the margin fix I mentioned above no longer seems to work in chrome. Now, whether or not I have a background color on the navigation block, the margins seem to be too wide, and I can’t seem to get the links to sit closer together again (on chrome only. on safari, they’re still extremely close together.)

• This reply was modified 3 years, 1 month ago by Haldan. Reason: another thing I realized

Hi @hblecher,

I’d check if you have any caching plugin active – it seems like the site is still serving me old CSS (as in CSS not present in Tove 0.2.2).

— Anders

Hmm, strange. The only cache plugin I’ve got going is what came preinstalled (WP Super Cache) — but I’ve gone and deleted that cache a few times since the update. Would that plugin cause the navigation margin issue I’m describing?

The post content is showing up correctly for me now, so you likely managed to empty the cache.

The Safari issue might be that you are running an older version of Safari that doesn’t support the gap CSS property, which the Gutenberg plugin uses for spacing between elements in some blocks (including the navigation block).

Hi Anders,

That makes sense re: the safari issue. I’m not running the most current version.

Re: the post content, yes that is working fine for me too, but the issue I’m still having (which is what I thought you were referring to above) is the spacing of the navigation elements. Since 0.2.2, the navigation elements are again spaced far apart — and the using the background color thing you suggested initially for that problem no longer works (now when I add bg color, it only affects top and bottom margins on the navigation block, but doesn’t change anything about the spacing between the elements). Is there any way I can reduce the spacing on the spacing on the navigation elements to return to how it was pre-0.2.2?

Thanks again.

Hi @hblecher,

Tove was updated to use the Core spacing in the navigation block, to reduce the complexity of the theme styles. You can modify the Core spacing by adding the following custom CSS:

.wp-block-navigation .wp-block-page-list, .wp-block-navigation__container { gap: .25em 1em; }

— Anders

That worked, thanks! Appreciate all the help.

Hi Anders,

Since update 0.4, a new margin issue has popped up for me. In the query loop, the post date now has a large bottom margin, and the post title has large bottom and top margins. The margins don’t seem to be responding to the no-margin-bottom and top additional css. Any suggestions?

Thanks.

UPDATE: Sorry, I figured it out. The change seems to be that now the spacer blocks have top and bottom margins, where they used to lack that. I added the additional css tags to the spacers, and that has seemed to work.

• This reply was modified 3 years, 1 month ago by Haldan.

Hi @hblecher,

Yeah, 0.4 opts-in to the block-gap feature in Gutenberg, which results in Gutenberg applying base margins to most elements. It’s required to support some features in the Site Editor, including gutter control for the Columns block (and presumably future gutter settings for Buttons, Query, etc.).

— Anders

FYI, the above code broke after the most recent update (of either Tove or Gutenberg, I can’t be sure, since I updated at the same time). It no longer recognized ‘gap’ — seems to now prefer column-gap and row-gap instead.

• This reply was modified 3 years ago by Haldan.