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

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

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

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

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

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

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

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (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%;
}
}

 

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

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

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.