I’ve had no luck with the plugins on offer at Micro.blog, so I have set up two- and three-column flex boxes that become single columns on small screens.

Set up snippets for the HTML in Drafts and wherever else you find convenient. Write the post itself in Markdown, unless you have other CSS classes to apply.

CSS

Reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Brief intro: https://www.w3schools.com/csS/css3_flexbox.asp

/* for responsive three- and two-column images */

img.cols  {
  padding: 5px 0px;
}

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-three-column {
  flex: 33%;
  padding: 5px;
}

.flex-two-column {
  flex: 50%;
  padding: 5px;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

This custom CSS carries over when I change themes, which is cool. Then I only need to possibly tweak CSS on a new theme, not start over.

HTML Example for Two Columns

  • Works well landscape-oriented images. Example from Aug. 25, 2023, but is also serviceable for vertical images, e.g. this Jan. 1, 2023 post.
  • After you are done with the following, link the images to their full size counterpart. This is very easy in MarsEdit.
  • You can replace images in one div with <p>text</p>, if you want. Example post from Sept. 1, 2023. But if you put text in both columns, you’ll need to fiddle with the padding, as I did inline on June 12, 2024 with my eyes on both the desktop and my phone.
<div class="flex-container">

<div class="flex-two-column">
	<img src="" class="cols" alt="" width="100%">
	<img src="" class="cols" alt="" width="100%">
</div>

<div class="flex-two-column">
	<img src="" class="cols" alt="" width="100%">
	<img src="" class="cols" alt="" width="100%">
</div>

</div>

The post examples linked above have captions in an ordered list. I did this with HTML and a CSS class of “captions” to render the font size at 90%.

ol.captions {
	font-size: 90%;
}

Markdown would be easier, but I don’t usually do this kind of post from my phone. In any case, I can still write up captions in Markdown and export them as HTML for use in my post.