Very long spacing between top banner on a page and the first header on the page

Hi everyone
Lately, I have noticed that there is now a huge spacing between the banner/image on top of a page and the first header/line of text on the page. I just noticed one day upon opening my Obsidian, and unfortunately, I haven’t been able to backtrack to some specific change or update of some kind that might be the one causing it.

I have tried to change appearance. My preferred theme is Things, but changing to another theme doesn’t help. I then looked at my plugins, especially the Banner and Homepage plugin, but nothing I could tweak here has resolved the issue. Trying to turn off my most recently installed plugins hasn’t made any difference, either.
That said, it still could be a plugin causing this, though. Before posting this request for help, I read about a similar spacing problem in this forum which turned out to be caused by the Typewriter plugin, which I haven’t installed.

Any suggestions? Thank you very much.

There were some spacing changes in the v.1.3.7 release, but nothing that should create a long gap (I don’t think). A bit more information will help others help you here.

What Obsidian version are you using? What OS? …things like that. You already mentioned it’s the same using different themes; that’s good to know. And a screen shot or two as well: maybe of the gap you see in the editor and something from the inspector to get an idea of where the space is coming from like this:

Thank you for your reply, and yes, I should have been more specific. My Obsidian is the 1.3.7 release (the issue was there before that) and my OS is Windows 10, latest update and fully patched.

I am not strong when it comes to reading or handling code, so I am not sure if this screenshot provides any relevant info. If not, I would appreciate if you or others would guide me here.

This picture shows the gap on each page that has a top banner.

No worries; the screenshot gets us started. If you look at the very top above the purple highlighted bit, you’ll see --banner-height:500px. That seems odd, but maybe you set that value? I think the default is 250. What are your settings in this window?

Yes, You’re right. The default setting is 250. 500 is what I have chosen because of my vision impairment.
My full banner settings look as you can see in the 3 attached screenshots, Banner setting 01, 02, and 03.

Thank you very much for your time and effort.

I tried in Obsidian v.1.3.7 using Banners with a 500px height, and I couldn’t reproduce the spacing you are seeing.

The few options I see are:

  • get a bit more familiar with the inspector to find out where that gap is coming from in the CSS
  • try some of the troubleshooting tips to see if it’s another plugin and/or CSS conflict
  • try in a new vault

I see a gap as well between the banner and the first line and am using the Minimal theme. I turned off all plugins except for the Banner to troubleshoot. I noticed it seemed fixed when I selected Above instead of Center in the Vertical Alignment. But when I reopened my vault, the issue was back again. So not sure what is going on.

UPDATE:
I was watching this video on the new properties feature (UPDATE: Properties in Obsidian - YouTube). When I turned off the setting Editor/Show Properties in Document, the extra spacing in Preview mode is gone. Also, the spacing isn’t there when viewing the page in source mode.

1 Like

The Banners plugin hasn’t been updated to work with Obsidian v1.4+ yet.

The OP is using Obsidian v1.3.7, so their issue is different here.

3 Likes

Hi, I had a similar problem
I disabled Code Block enhancer → problem solved

btw Better CodeBlock → No issues with Banner

Hope that helps

1 Like

Thank you. However, I don’t have the Code Block Enhancer plugin installed, so, in my case, it must be another plugin that is somehow interfering. So far, I haven’t located it, but I’ll keep trying when time allows. Right now, it is merely an esthetical hiccup. Obsidian works just fine

Any updates on this? I am having the same issue.

Thank you for your suggestion. Code block enhancer isn’t part of my plugins so it has to be another of my plugins. Still trying to figure out which one.

Any updates ? i have the same issue =(

I had this problem too… after many attempts I understood that just hide the properties. Leaving them visible takes up space even if they don’t appear in reading mode.
Settings → Editor → Properties in document. The options are:

  • Visible (default) — displays properties at the top of the note, if there are any.
  • Hidden — hides properties, can still be displayed in the sidebar via Properties view.
  • Source — displays properties in plain text YAML format
    :wink:
1 Like

Thank you for your feedback. Happy it worked for you, but in my case, trying your suggestion didn’t change anything. It is somehow a bit tricky because there has to be something specific about the individual setup that makes disabling or deleting a certain plugin works for some as mentioned in other comments above. And your suggestion for you. Beats me what it is. I have chosen to just disable the Banner plugin as it doesn’t really have any real influence on how I use Obsidian. Just aesthetics if you will and then I don’t have to look at it. Cheers.

@ OK I’m sorry I couldn’t solve the problem… However you’re right it’s just an aesthetic issue and it’s not fundamental to the functioning of Obsidian. =)

I’m having the same issue while using Obsidian v1.4.13. When I disable Properties, as @Manu14 suggested, it helps make it not as egregious a gap but the problem persists. For me, it appears to come from a malfunction with the .obsidian-banner-wrapper style section of the Banners plugin. When I disable the margin-top: calc(var(--banner-height) - 15px); and padding-top: 0.5em; styles under that section the problem seems to be resolved.

Before I set around making a CSS snippet myself I had a look around. The user davidolrik already created a small CSS snippet that, for me, addresses the issue.

1 Like

Thank you for pointing things in that direction. I think that how to do but I admit that I am not very experienced in handling CSS-snippet. Unfortunately, davidolrik doesn’t explain to bit of coping his snippet into Obsidian and how to activate it. Copying the snippet to the My Snippet folder is one thing, but then what?
Would you mind walking us through it?
Thank yyou.

1 Like