# Make the pictures smaller in Markdown

**URL:** <https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630>\
**Category:** Elements\
**Created:** [September 17, 2026, 7:44am UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630 "2026-09-17T07:44:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Blumik](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/blumik/32/24405_2.png) [@Blumik](https://forums.realmacsoftware.com/u/Blumik)\
**Post date:** [September 17, 2026, 7:44am UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/1 "2026-09-17T07:44:58Z")

</div>

Good morning,

When I use Markdown and I want to add an image, I just drag it from the resources directly into the Markdown document. But how can I make the images smaller? What command do I need to enter for that?

Mike

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 17, 2026, 8:21am UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/2 "2026-09-17T08:21:26Z")

</div>

do you mean visually smaller, or do you want to resize the actual image?

---

<div class="post-metadata">

**Author:** ![Blumik](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/blumik/32/24405_2.png) [@Blumik](https://forums.realmacsoftware.com/u/Blumik)\
**Post date:** [September 17, 2026, 4:40pm UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/3 "2026-09-17T16:40:49Z")

</div>

I have attached a picture here

The pictures fill the entire window.

If you could now get the image half as big and maybe neatly centered or on the left or right, that would be really amazing.

 ![Bildschirmfoto 2026-09-17 um 18.37.47](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/3/f35c235973a4bb0848dc98aca99fd3d2a7d2ccf5.png)

---

<div class="post-metadata">

**Author:** ![RichardPhoto](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/richardphoto/32/37279_2.png) [@RichardPhoto](https://forums.realmacsoftware.com/u/RichardPhoto)\
**Post date:** [September 17, 2026, 6:49pm UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/4 "2026-09-17T18:49:38Z")

</div>

I created a custom HTML component and added some styling, such as:

```auto
/* Set max image width for smaller screens and centre in markdown content*/

.markdown-content img {

max-width: 90%;

display: block;

margin-top: 12px;

margin-bottom: 12px;

margin-left: auto;

margin-right: auto;

}

/* Set max image width for larger screens and centre */

@media (min-width: 768px) {

.markdown-content img {

max-width: 600px;

max-height: 600px;

display: block;        

margin-top: 20px;

margin-bottom: 20px;

margin-left: auto;

margin-right: auto;

    }   

}

```

Obviously, you can change the max sizes accordingly (either a percentage, as I have done for smaller screens or a pixel width and height for larger). Margin-left and margin-right set to auto centre the image.

Then, add the CSS class (in this example, the class is markdown-content) to the markdown container in the advanced section of the inspector.

---

<div class="post-metadata">

**Author:** ![Blumik](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/blumik/32/24405_2.png) [@Blumik](https://forums.realmacsoftware.com/u/Blumik)\
**Post date:** [September 18, 2026, 10:53am UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/5 "2026-09-18T10:53:40Z")

</div>

Unfortunately, I don’t have a field for CSS

 ![Bildschirmfoto 2026-09-18 um 12.52.54](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/2/52980aaac2c8538b9af92e55ccbf873ef766bbf5.jpeg)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 18, 2026, 11:13am UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/6 "2026-09-18T11:13:58Z")

</div>

That doesn’t look correct, have you tried restarting Elements and/or your Mac?

You should see a Classes box in the Advanced group like this:

 ![CleanShot 2026-09-18 at 13.13.11@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/b/6b3c0b21fe303b614d2ff31d40682e107d0b6523.png)

---

<div class="post-metadata">

**Author:** ![Blumik](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/blumik/32/24405_2.png) [@Blumik](https://forums.realmacsoftware.com/u/Blumik)\
**Post date:** [September 18, 2026, 12:17pm UTC](https://forums.realmacsoftware.com/t/make-the-pictures-smaller-in-markdown/57630/7 "2026-09-18T12:17:03Z")

</div>

I’ve found the error: in dark and light mode, the border around the field is not visible – you might be able to adjust that. Without the border, you have no idea where to click inside. I did enter your suggestion, but nothing has changed.

 ![Bildschirmfoto 2026-09-18 um 14.12.12](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/7/67190c38b54ea0eda04189afc9c71b233a7624be.jpeg)