HowCarolSees Posted August 23, 2021 Share Posted August 23, 2021 Site URL: https://roadrunner-aardvark-7ncs.squarespace.com/ Hello! I was hoping to get help on custom css to center align all the images in this gallery block. It looks like left align seems to be the default and I don't see the option to center. I want this particularly for the last line of images where there's not an even number of images. PW: 123456 Link to comment
iamdavehart Posted August 23, 2021 Share Posted August 23, 2021 (edited) The Gallery section in 7.1 layouts is using a CSS Grid when you pick "Grid: Simple" as the layout option. This lays out as you have shown above, as grid layouts are there to align rows AND columns. What you're describing is closer to a CSS flexbox layout, so we'd need to completely remove the grid rules and layout again. you can do this by adding some css. This code is targeted just at the block using a data section id, so you can put this in your custom css (or wrap it in <style></style> block and put it in a code block on your page) 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% } } finds the gallery and unsets its grid properties adds in properties to tell it to lay out as a flexbox and then center its content tells items within the gallery to be 12% wide. this is to put six on a row if the screen is phone or ipad-width then drop that down to two on a row the "gap" properties aren't that well supported for flexboxes in all browsers, so I've used a padding instead to space them out roughly the same as your original grid layout. it's close enough i think Edited August 23, 2021 by iamdavehart adding picture to show outcome MASS86, tuanphan and HowCarolSees 2 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
HowCarolSees Posted August 23, 2021 Author Share Posted August 23, 2021 So helpful, thank you Dave! It worked 🙂 Link to comment
Belizabeth Posted February 19 Share Posted February 19 Hello, I'm in a pickle and I need help. No matter how hard I try I can't figure out why the gallery images won't center. Anyone? amani-salon-suites.squarespace.com/our-salon-services Password: test Link to comment
tuanphan Posted February 21 Share Posted February 21 On 2/20/2024 at 2:59 AM, Belizabeth said: Hello, I'm in a pickle and I need help. No matter how hard I try I can't figure out why the gallery images won't center. Anyone? amani-salon-suites.squarespace.com/our-salon-services Password: test You can use this CSS code (Desktop) @media screen and (min-width:992px) { div#gridThumbs .grid-item:nth-child(n+6) { position: relative; left: calc(~"50% + 10p"x); } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment