Jump to content

Adjust Gallery / Image Stacking on Mobile

Recommended Posts

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
  • Replies 4
  • Views 565
  • Created
  • Last Reply

Top Posters In This Topic

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.