Hi Gary, and thanks for the feedback, we always appreciate hearing from folks about what they like and don’t like in our themes. It’s great to hear that Sela has been a good teaching theme.
Left-aligning the galleries is an aesthetic decision made by Sela’s designer. We wouldn’t be able to make a gallery alignment change in Sela now, because it would affect all users of the theme, who would unexpectedly see their galleries change position when they update the theme.
That said, centering galleries can be done with custom CSS, something that’s easier than ever now that WordPress includes a CSS editor built right into the Customizer. If you or your students ever need help with that, we’re here to lend a hand.
Thanks again for getting in touch!
Thanks for your quick and explanatory response. I get it.
Could you post the suggested CSS to center align galleries? That would be appreciated and would provide the added benefit of providing an example for when I teach CSS basics.
Cheers!
Sela uses a CSS calculation for thumbnail galleries. For a 3-column gallery this should do the trick:
.gallery-columns-3 .gallery-item {
max-width: calc(32%);
}
That slightly enlarges each thumbnail to more fully fill up the whole column width.
The value of the max-width will be different, depending how many columns your gallery is. See this previous thread for more details:
https://wordpress.org/support/topic/gallery-not-centered-in-sela-theme/
If you use the Jetpack Tiled Galleries module instead of default WordPress galleries, they will always fill the content width, so you wouldn’t need to use this trick.
-
This reply was modified 9 years, 1 month ago by
Kathryn Presner. Reason: fix code formatting
I might have found a solution.
I thought that if I made the gallery container (.gallery or .gallery-columns-3) less than 100% and use the margin:0 auto to align that container on the page it might work and it did. You have to fiddle with the percentage based on the number of columns but it also seems stable in mobile.
I’m leaving the previous method up for a bit so you can still see how that method is not working.
I’m back with a postscript, so to speak.
The above “solution” which I though was good turned out to not be effective. After searching around for code snippets that might work I was able to cobble together code that worked very well:
.gallery {
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.gallery-columns-3 {
display: flex;
justify-content: center;
flex-wrap: wrap;
width:80%;
}
#gallery-6 {
margin:0 auto;
}
By making the gallery a flex container I was able to nicely center it.
The first bit on the class .gallery worked for the 8-column gallery, but it didn’t quite adjust the 3-column gallery in a way that I liked so I added a few more rules. The .gallery-columns-3 rule made it less than 100%, 80% seemed to be the sweet spot. and then the #gallery-6 rule zeroed in on that specific gallery and used the standard margin centering for block elements.
Both galleries seem to work in mobile, though I didn’t widely test this.
I hope this helps with anyone else wishing to center galleries in the Sela theme.
Gary you have saved me soooo much time thanks!!!!
