Adjust Gallery / Image Stacking on Mobile

Site URL: https://kargo.com/marketing-showcase

Hello,

I'm attempting to resolve an issue on mobile specifically for https://kargo.com/marketing-showcase

The images under the sections "creative spotlight" and "in-article" are set up as a grid style gallery. This was done as sizing / alignment becomes an issue with 3 images across.

However, I'd like them all to appear as stacked images on the mobile view such as in the section "get social", which are individual image blocks (4) side by side.

Is there any way I can adjust the way grid style gallery appears on mobile. Or perhaps alternatively is there a better way to have the 3 images side by side as individual image blocks without having awkward sizing?

following up here, I seem to have been able to resolve the issue with some code and switching all images over to a gallery block.

however I'm curious if there is a way to move the gallery titles above the images (as well as increase font size) rather than displaying underneath?

see new page here https://kargo.com/marketing-showcase-2

On 8/17/2021 at 3:24 AM, mbaber said:

following up here, I seem to have been able to resolve the issue with some code and switching all images over to a gallery block.

however I'm curious if there is a way to move the gallery titles above the images (as well as increase font size) rather than displaying underneath?

see new page here https://kargo.com/marketing-showcase-2

Hi. I see title above image here. It looks like you solved?

On 8/18/2021 at 4:12 AM, tuanphan said:

Hi. I see title above image here. It looks like you solved?

Hi tuanphan,

I've just updated the page to show titles below gallery images. Please see the images below "creative spotlight" as reference.

On 8/19/2021 at 11:49 PM, mbaber said:

Hi tuanphan,

I've just updated the page to show titles below gallery images. Please see the images below "creative spotlight" as reference.

Add to Design > Custom CSS

/* creative spotlight */
div#block-b766f7721863c046bbda .margin-wrapper {
    display: flex;
    flex-direction: column-reverse;
}