Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adjust Gallery / Image Stacking on Mobile


mbaber

Question

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?

 

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0
Posted (edited)

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

Edited by mbaber
forgot to include url
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...