[OT] CSS: How to make multiple Instagram pics in one row?

[wtagr]

I am applying the inner Instagram shortcode for embedding the picture from Instagram, but it may default for one per row. I am trying to insert three or two Instagram pictures in one row. I would like to ask whether exist any simple way to handle this?

I am using the academic-theme by the way.

Thank you!

[jmooring]

Add this to your css/scss/sass:

.instagram-media {
  display: inline-block !important;
  width: 326px !important;
}

Looks like 326px is the minimum width. You can specify something smaller but it will be ignored.

This markdown:

{{< instagram B_7e-ywpKpH hidecaption >}}
{{< instagram B_7eH6CFmKf hidecaption >}}

produces this:

[jmooring]

You can also use the {{< instagram_simple >}} shortcode to produce narrower blocks.

Markdown:

{{< instagram_simple B_7e-ywpKpH hidecaption >}}
{{< instagram_simple B_7eH6CFmKf hidecaption >}}
{{< instagram_simple B_7wLtLp3k4 hidecaption >}}
{{< instagram_simple B_7p90PpFTF hidecaption >}}

CSS:

.s_instagram_simple {
  display: inline-block;
}
.s_instagram_simple img {
  width: 180px !important;
  height: 180px !important;
  object-fit: cover;
}

Result:

[alexandros]

@jmooring Thank you for the contributions.

However this topic is OT and as such I am archiving it.

@wtagr We do not offer support for CSS and JS questions here. This forum is only for Hugo support questions.