Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Is there a way to have less space around the admonition text? #200

Closed
ReaderGuy42 opened this issue Mar 3, 2022 · 19 comments
Closed

Is there a way to have less space around the admonition text? #200

ReaderGuy42 opened this issue Mar 3, 2022 · 19 comments

Comments

@ReaderGuy42
Copy link

Really cool plugin, especially combined with the Live Preview mode now :)
However, I feel like there is too much space between the title and the text, and then again the text and the end of the admonition block.

Is there a way to remove these blank lines or at least shrink them somehow?

Thanks!

image

@valentine195
Copy link
Member

Sure... Admonition content has a 10px margin on the top and bottom. You can override that with a CSS snippet:

.admonition-content {
    margin-top: 10px;
    margin-bottom: 10px;
}

@ReaderGuy42
Copy link
Author

Thanks, but that doesn't change anything. I'm in Live Preview mode, and I saw in the source that there's a different block for that mode, or maybe I misunderstood that.

@valentine195
Copy link
Member

That snippet isn't specific enough, you're right. This should work (it does on the help vault for me):

.admonition-content-holder > .admonition-content {
    margin-top: 5px;
    margin-bottom: 5px;
}

Sorry about that!

@ReaderGuy42
Copy link
Author

Please stick to 1 issue for discoverability!

Originally posted by @valentine195 in #204 (comment)

Sorry! I just saw this one had been closed, so I wasn't sure if you would see my other comment.

Now it works, thank you!!

@ReaderGuy42
Copy link
Author

Ok, so sorry to re-open this for a third time, that second snippet does reduce the white space/margins, but there is still a significant amount of dead space and I already have it set to 0px
This is without the snippet:
image

This is with the snippet enabled:
image

Is there some way to further the reduce the margins?
Thanks!

@valentine195
Copy link
Member

That is probably driven by the paragraph element that the content is rendered as. You could do something like:

.admonition-content > *:first-child {
    margin-top: 0px;
}
.admonition-content > *:last-child {
    margin-bottom: 0px;
}

@ReaderGuy42
Copy link
Author

Unfortunately now it's back to having almost no change at all...

@valentine195
Copy link
Member

Are you using a theme?

@ReaderGuy42
Copy link
Author

I am, I'm using Shimmering Focus (https://github.com/chrisgrieser/shimmering-focus/) but when I just switched to the default theme, there was no real difference either. Does that help?

@valentine195
Copy link
Member

Hmm, it looks fine for me with the default theme… you may need to inspect the element in the developer tools to see what CSS is being applied. You can open them with Ctrl+Shift+I (Cmd+Option+I on Mac), then select the element picker (top left icon, looks like a pointer).

@ReaderGuy42
Copy link
Author

Ok, which part would you like to see? I mean which elements exactly?

@valentine195
Copy link
Member

The admonition content holder.

@ReaderGuy42
Copy link
Author

Untitled

I'm not sure what you're looking for, but is this helpful?

@valentine195
Copy link
Member

That is, but for the element above that (the one with class="admonition-content-holder")

@ReaderGuy42
Copy link
Author

Untitled2
This?

@valentine195
Copy link
Member

Yeah so that one doesn’t have any margins (the orange), which is correct. Can you look at the text content? It’ll likely be a p.

@ReaderGuy42
Copy link
Author

image

@valentine195
Copy link
Member

Did you get this working? Does the snippet work in the help vault?

@ReaderGuy42
Copy link
Author

It does work, yes, just not quite as much as I'd like, but this is fine, thank you :)

@albsper albsper mentioned this issue Jan 18, 2025
7 tasks
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants