Center Image Gallery Contents

By default the images in an image gallery block are left aligned. Is it possible to center the images instead?

Can you share link to your site?

15 hours ago, tuanphan said:

Can you share link to your site?

https://blenny-oarfish-24kk.squarespace.com/ourstaff

Password: blenny

I need the staff photos to be center justified within the block/page.

7 minutes ago, mrjack16 said:

https://blenny-oarfish-24kk.squarespace.com/ourstaff

Password: blenny

I need the staff photos to be center justified within the block/page.

Add to Home > Design > Custom CSS

body#collection-5c4a1df9575d1fe4bb06e353 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
}

2 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

body#collection-5c4a1df9575d1fe4bb06e353 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
}

 

This does some weird things with irregular image sizing/cropping and isn't allowing multiple rows of photos.

On 12/9/2019 at 9:45 AM, mrjack16 said:

I was able to fix this by including flex-wrap.

 

body#collection-5c4a1df9575d1fe4bb06e353 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
      flex-wrap: wrap;
}

 

Where did you find the number you're using to reference the collection? I am having the same issue for a client and would like to center align the gallery images so that the bottom set does not appear left-aligned. 

https://minna-stess.squarespace.com/

password: minnastesssite

On 6/4/2020 at 9:37 AM, cpotter said:

Where did you find the number you're using to reference the collection? I am having the same issue for a client and would like to center align the gallery images so that the bottom set does not appear left-aligned. 

https://minna-stess.squarespace.com/

password: minnastesssite

 

Have you solved it yet? I see fine here.

On 6/8/2020 at 9:02 AM, tuanphan said:

Have you solved it yet? I see fine here.

I added a couple of gallery items in order to make it consistent, but would still love to know the fix! 

It works! I cut out the number because it was a reference to a specific gallery and used to center align my gallery items:

 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
      flex-wrap: wrap;
}

On 12/6/2019 at 9:07 AM, tuanphan said:

Add to Home > Design > Custom CSS

body#collection-5c4a1df9575d1fe4bb06e353 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
}

 

I've tried all of the codes in this forum and nothing is centering my Gallery Blocks. May somebody tell me what I need to get the logo galleries for this site to be centered? Thanks! https://guelphfilmfestival.ca/2020

On 10/1/2020 at 9:18 PM, dustinseabrook said:

I've tried all of the codes in this forum and nothing is centering my Gallery Blocks. May somebody tell me what I need to get the logo galleries for this site to be centered? Thanks! https://guelphfilmfestival.ca/2020

Do you still need help on this?

I've tried this code on my site but I can't get mine to work no matter what. I've tried it with and without the collection number

 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    justify-content: center;
      flex-wrap: wrap;
}

I can see others have gotten it to work, but I cannot. Can you help me? Thanks so much

https://trumpet-red-ffsb.squarespace.com

sharynchanart

I seem to have found a solution to this by adding this code in the Advanced section of every page that I have a Simple Gallery section. 

section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper {
    display:flex;
    align-items:center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction:row;
    grid-template-rows:unset !important;
    grid-template-columns:unset !important;
    grid-column-gap:unset !important;
    grid-row-gap:unset !important;
}

section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper figure {
    flex-basis:12%;
    padding:0 1.5vw 3vw 1.5vw;
}

@media screen and (max-width:768px) {
    section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper figure {
        flex-basis:45%
    }
}

I found it at this post here : https://forum.squarespace.com/topic/202953-centering-the-gallery-block-images/?do=findComment&comment=490243

If there is a more global way to do this, I'd love to know

Hi! First time poster here, having the same problem and can't seem to make the above work- not sure if im getting the wrong id number for the gallery block. (it's only really an issue when looking on a phone as aligns the third picture on the left which looks messy. Would greatly appreciate any help 

site is currently on 

https://amethyst-gar-gagy.squarespace.com/work-1/clay-ceramics-5el64

password: dan

15 hours ago, GN12674 said:

Hi! First time poster here, having the same problem and can't seem to make the above work- not sure if im getting the wrong id number for the gallery block. (it's only really an issue when looking on a phone as aligns the third picture on the left which looks messy. Would greatly appreciate any help 

 

site is currently on 

https://amethyst-gar-gagy.squarespace.com/work-1/clay-ceramics-5el64

password: dan

Try adding to Design > Custom CSS

/* Center mobile gallery */
@media screen and (max-width:767px) {
/* Scenes of Roath */
[data-section-id="622661cbd043ea62e01bf46b"] figure:nth-child(3) {
    position: relative;
    left: 50%;
}
[data-section-id="624992949a20d750d6bb83c3"] figure:nth-child(3) {
    position: relative;
    left: 50%;
}
}

On 4/5/2022 at 8:58 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Center mobile gallery */
@media screen and (max-width:767px) {
/* Scenes of Roath */
[data-section-id="622661cbd043ea62e01bf46b"] figure:nth-child(3) {
    position: relative;
    left: 50%;
}
[data-section-id="624992949a20d750d6bb83c3"] figure:nth-child(3) {
    position: relative;
    left: 50%;
}
}

 

Thanks so much! That worked an absolute treat, carried across to other galleries fine when i added the section ID- life saver! 

I'm trying to do the same - centre the bottom row in a gallery. I've tried all of the suggestions on this thread but nothing seems to work. Help! 

https://alpaca-rose-3nt8.squarespace.com/

PW:Weddings2022

5 minutes ago, DreamrW said:

I'm trying to do the same - centre the bottom row in a gallery. I've tried all of the suggestions on this thread but nothing seems to work. Help! 

https://alpaca-rose-3nt8.squarespace.com/

PW:Weddings2022

Also just tried this from GhostPlugins with no joy! 😞

// Center Last Images - Grid Gallery Block //

.sqs-gallery-block-grid .sqs-gallery-design-grid {
  flex-wrap: wrap !important;
  display: flex !important;
  justify-content: center !important;
}

On 5/19/2022 at 6:53 PM, DreamrW said:

I'm trying to do the same - centre the bottom row in a gallery. I've tried all of the suggestions on this thread but nothing seems to work. Help! 

https://alpaca-rose-3nt8.squarespace.com/

PW:Weddings2022

You mean Bottom Logos on Homepage? Use this code

@media screen and (min-width:992px) {
body.homepage .gallery-grid.gallery-grid--layout-grid figure:nth-child(n+19) {
    position: relative;
    left: 75%;
}
}

On 5/21/2022 at 12:34 AM, tuanphan said:

You mean Bottom Logos on Homepage? Use this code

@media screen and (min-width:992px) {
body.homepage .gallery-grid.gallery-grid--layout-grid figure:nth-child(n+19) {
    position: relative;
    left: 75%;
}
}

 

Fabulous! That worked, thank you! 

Just now, DreamrW said:

Fabulous! That worked, thank you! 

Is it possible to show three rows of logos on mobile? Currently it displays 2.

Thanks in advance!

On 5/21/2022 at 12:34 AM, tuanphan said:

You mean Bottom Logos on Homepage? Use this code

@media screen and (min-width:992px) {
body.homepage .gallery-grid.gallery-grid--layout-grid figure:nth-child(n+19) {
    position: relative;
    left: 75%;
}
}

 

That's thrown out the picture gallery on the homepage. Is there a fix? 

19 hours ago, DreamrW said:

That's thrown out the picture gallery on the homepage. Is there a fix? 

Remove above & use this new code

@media screen and (min-width:992px) {
[data-section-id="6283d753c96085051512eeb0"] figure:nth-child(n+19) {
    position: relative;
    left: 75%;
}
}

9 hours ago, tuanphan said:

Remove above & use this new code

@media screen and (min-width:992px) {
[data-section-id="6283d753c96085051512eeb0"] figure:nth-child(n+19) {
    position: relative;
    left: 75%;
}
}

 

You are incredible! Thank you 🙂