CSS to resize images in blockquotes

What I’m trying to do

Im trying to make images in blockquotes smaller.

Things I have tried

all views */
blockquote .internal-embed img {
max-width: 40px !important;

It is working in reading view but not in editing view.
What am I missing?


The selectors for Editing and Reading views are different. Give this a try for Live Preview:

.markdown-source-view.mod-cm6 .cm-line .internal-embed.image-embed img {
    max-width: 100px;

And for completeness sake, this should take care of both Live Preview and Reading modes:

/* reading + live preview images in blockquotes */
.markdown-preview-view blockquote .internal-embed img,
.markdown-source-view.mod-cm6 .cm-line .internal-embed.image-embed img {
    max-width: 100px;

CleanShot 2024-01-08 at 12.09.04


Thank you for clearing this up for me.

This works for me in Live Preview, if the > comes on the same line as the image.
But, not if the image comes in a line after it.
Interestingly, it works in both cases in Reading view.

// > text
// > ![[image]]

works in both views

// > text
// ![[image]]

works only in reading view

The latter I consider slightly botched syntax on your behalf, since you’re not having a newline between two different blocks which are possibly intended to be the same…

Reading view respects the standard and group the lines in the same block although the syntax is slightly strange with the missing blockquote syntax. And live preview focuses on the missing blockquote syntax. In general reading view is most compliant to the markdown standard that Obsidian is using, but this could be considered an edge case, so if it matters to you, you should use the syntax which works in both cases.

Remember it’s different markdown engines used in the two modes, so differences will always be there to some extent.

1 Like

For next time, if you use code blocks for markdown, CSS, etc., it will be easier to see what’s going on in your examples.

Live Preview is a hybrid with all sorts of quirks, but I agree with holroy here. Do you want the image in the blockquote or not? If so, you need a > before the ![[embed.jpg]].

If your note is this:

> blockquote text

this is what you see in the inspector for Live Preview. It’s a new line and the image is a plain media embed outside of the blockquote / .HyperMD-quote divs, just as if it was off on its own.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.