Wider line lenght for images only while keeping text limited to shorter line length

[xBlady]

Hello!

I have limited line length setting on and I want to keep that to text, but when it comes to images, I’d like to see them full available size, just as in some medium articles.

I don’t know how to write css for that, i’ve searched and found only these threads that don’t help. Can anyone help please?

Example of what I want to be able to see without zooming the image.

[ariehen]

Have a look at the Minimal theme and their block width helper classes. You can easily make notes like what you describe with a cssclass: on a note-by-note basis or for all notes.

If the Minimal theme doesn’t interest you, there are ways to do it but we need to know the theme you are using.

[xBlady]

I’m using just the basic theme, I could add a custom css property for that in apperance settings, but I need the code, I’d like to have have these images display like that globally

[ariehen]

You can give this a try…

body .inline-title {
  width: var(--file-line-width);
  margin-left: auto !important;
  margin-right: auto !important;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content {
  max-width: 100% !important;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-line {
  margin-left: auto !important;
  margin-right: auto !important;
}

img[alt*="center"] {
    display:block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4px;
    margin-top: 4px;
}

img[alt*="left"] {
    float:left;
    clear:left;
    margin-right: 1rem;
    margin-bottom: 4px;
    margin-top: 4px;
}

img[alt*="right"] {
    float:right;
    clear:right;
    margin-left: 1rem;
    margin-bottom: 4px;
    margin-top: 4px;
}

Live Preview with no snippet:

Live Preview with the snippet:

To align the images, add a left, center, or right like this. The left doesn’t do much here (the image defaults to the left), but center and right work.

![[image.jpg|left|400]]

![[image2.png|center|200]]

![[image3.jpg|right]]