Consider making the gallery view responsive on small screens

[hnarayanan]

This is not a bug report but a feature request. Please close this issue if that is not the purpose of the issue system, apologies. 😅

The widget I use the most on my family blog is the gallery widget. It is so lovely to use and looks great on medium and large-sized screens. However, on small sized screens, e.g. a phone, it makes the content look really tiny, e.g.

Would you consider (and I could try to help) making the content responsive on small screens?

[chavi362]

I would like to work me please @TryGhost, tell me which files to make responsive and assign it to me

[minimaluminium]

Hey @hnarayanan,

Do you have any preference on how you'd want them look on small screens? Due to the HTML structure of the card, I think the simplest one would be making them stacked. Just wondering if you have any better idea 🙂

[hnarayanan]

Hello! I do not have a better plan, I was imagining a single column stack.

[heybran]

Hi, for me I had the same doubt about the gallery layout on mobile, however it does support lightbox feature so it helps. Although I'm afraid that some users might not know there is a lightbox, so I played with a bit of CSS and add a maximize icon at the top right corner, here's how it looks.

In case someone wants to do same, here's the CSS codes that I used.

  .kg-gallery-image {
    position: relative;

    &::after {
        content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tYXhpbWl6ZS1pY29uIGx1Y2lkZS1tYXhpbWl6ZSI+PHBhdGggZD0iTTggM0g1YTIgMiAwIDAgMC0yIDJ2MyIvPjxwYXRoIGQ9Ik0yMSA4VjVhMiAyIDAgMCAwLTItMmgtMyIvPjxwYXRoIGQ9Ik0zIDE2djNhMiAyIDAgMCAwIDIgMmgzIi8+PHBhdGggZD0iTTE2IDIxaDNhMiAyIDAgMCAwIDItMnYtMyIvPjwvc3ZnPg==);
        position: absolute;
        right: 6px;
        top: 6px;
    }
  }

If you don't know where to inject the CSS code, you can go to Settings -> Code injection -> either Site header or Site footer will work.

If this is your first time adding CSS code, you need to wrap above codes with a style tag like this:

<style>
  .kg-gallery-image {
    position: relative;

    &::after {
        content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tYXhpbWl6ZS1pY29uIGx1Y2lkZS1tYXhpbWl6ZSI+PHBhdGggZD0iTTggM0g1YTIgMiAwIDAgMC0yIDJ2MyIvPjxwYXRoIGQ9Ik0yMSA4VjVhMiAyIDAgMCAwLTItMmgtMyIvPjxwYXRoIGQ9Ik0zIDE2djNhMiAyIDAgMCAwIDIgMmgzIi8+PHBhdGggZD0iTTE2IDIxaDNhMiAyIDAgMCAwIDItMnYtMyIvPjwvc3ZnPg==);
        position: absolute;
        right: 6px;
        top: 6px;
    }
  }
</style>

The SVG icon used is from: https://lucide.dev/icons/maximize