mrjack16 Posted December 5, 2019 Share Posted December 5, 2019 By default the images in an image gallery block are left aligned. Is it possible to center the images instead? Link to comment
tuanphan Posted December 5, 2019 Share Posted December 5, 2019 Can you share link to your site? 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
mrjack16 Posted December 6, 2019 Author Share Posted December 6, 2019 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. Link to comment
tuanphan Posted December 6, 2019 Share Posted December 6, 2019 (edited) 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 December 6, 2019 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
mrjack16 Posted December 6, 2019 Author Share Posted December 6, 2019 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
Solution mrjack16 Posted December 9, 2019 Author Solution Share Posted December 9, 2019 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; } Link to comment
cpotter Posted June 4, 2020 Share Posted June 4, 2020 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 Link to comment
tuanphan Posted June 8, 2020 Share Posted June 8, 2020 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
cpotter Posted June 11, 2020 Share Posted June 11, 2020 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! Link to comment
zuzahicks Posted July 8, 2020 Share Posted July 8, 2020 (edited) 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 July 8, 2020 by zuzahicks Link to comment
dustinseabrook Posted October 1, 2020 Share Posted October 1, 2020 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
tuanphan Posted October 3, 2020 Share Posted October 3, 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? 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
SChan Posted March 9, 2022 Share Posted March 9, 2022 (edited) 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 March 9, 2022 by SChan Link to comment
SChan Posted March 9, 2022 Share Posted March 9, 2022 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
GN12674 Posted April 4, 2022 Share Posted April 4, 2022 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 Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 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%; } } 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
GN12674 Posted April 9, 2022 Share Posted April 9, 2022 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
DreamrW Posted May 19, 2022 Share Posted May 19, 2022 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 Link to comment
DreamrW Posted May 19, 2022 Share Posted May 19, 2022 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
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 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
DreamrW Posted May 23, 2022 Share Posted May 23, 2022 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
DreamrW Posted May 23, 2022 Share Posted May 23, 2022 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! Link to comment
DreamrW Posted May 23, 2022 Share Posted May 23, 2022 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
tuanphan Posted May 24, 2022 Share Posted May 24, 2022 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
DreamrW Posted May 24, 2022 Share Posted May 24, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment