Modify Canvas cards margin

[Blackout]

Hi everyone, I’m trying to create a css snippet that reduces the left and right margins of canvas cards, as shown in this image.

Note that the right margin is always bigger then the left one, because it also adds a space for the eventual scrollbar, even when it is not needed, which is annoying too (especially in small cards like the yellow one in image) because you can’t have some text symetrically centered inside of a card.

I tried this snippet:
.canvas-node-content { margin-left: -12px; }
But it presents two problems: first, it moves also the background, and second, “margin-right” stangely enough doesn’t seem to do anything.

Any help?

[ariehen]

It looks like the padding in the cards is coming from this:

.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view {
    padding: 0 var(--size-4-6);
}

so you could try adjusting that a bit. e.g.

.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view {
    padding: 0 10px;
}

There’s still a bit off to the right, I suppose for the scrollbar, but maybe you can make this work.

[Blackout]

Thank you!

In the end i managed to remove also the padding to the right by adding 2 zeros (idk why it is)

.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view {
    padding: 0 0 0 10px;
}

And to mantain the same dimensions the edit mode of the card i found this

.node-insert-event.mod-inside-iframe .cm-editor .cm-content {
  margin-left: -24px;
  margin-right: -26px;
}

[ariehen]

That padding: is 0top 0right 0bottom 10left. See: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties. If it works, it works!

Yeah, rendered canvas cards are a bit tricky because of the content-blocker layer. You can dig down under that in the Elements tree or, a neat trick, with the canvas-node-content-blocker layer selected, click delete on your keyboard to temporarily remove the layer and get to the elements below it.