Jump to content

Center Image Gallery Contents

Go to solution Solved by mrjack16,

Recommended Posts

  • Replies 32
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Link to comment
  • 5 months later...
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

Screen Shot 2020-06-03 at 9.37.08 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 4 weeks later...

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;
}

 

Edited by zuzahicks
Link to comment
  • 2 months later...
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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 1 year later...

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

Edited by SChan
Link to comment

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

Link to comment
  • 4 weeks later...

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

Screenshot 2022-04-04 at 17.25.27.png

Link to comment
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

Screenshot 2022-04-04 at 17.25.27.png

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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Link to comment
  • 1 month later...
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;
}
Link to comment
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Link to comment
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? 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.