Quick CSS fix for multi-column image gallery issues where images are shown too big when they’re alone in the last row.
It’s a super annoying bug that’s been around for over a year now. I have now idea when the official WordPress core will fix it but these will do for now.
Option #1 – inherit flex-grow
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
flex-grow: inherit;
}The gallery items have flex-grow which causes it to expand to full width if it doesn’t have images on all columns. You can paste this code into the “Customizer > Additional CSS”.
Option #2 – margin-right on the last-child
You can just add margin-right: auto to the :last-child of your gallery item. Inspect the image item, copy the class/selector into Customizer > Additional CSS, and apply margin-right: auto. This one didn’t work for my specific case but might for you.
Thanks a lot! It worked just fine
I wished Gutenburg would fix this issue. They could borrow your CSS coding in a blink of an eye and fix it.
Thank you man, it realy helped.
Thank you so much Johnny! This really helped me out!
Thank you so much
Hello, I have exactly the same problem but the CSS code is not working in the latest WordPress version. Do you have a new CSS code for the newest version?
Hi Johnny,
I just couldn’t get it to work, so I went ‘old school’ and added transparent images into the galley to complete the row which solved the problem 😉
Remember the pre-CSS days when Web Devs used blank images to pad their content and hold them in place inside of tables. Ahh, the simpler days…
Thank you! Had to change the selector but it worked beautifully.
.wp-block-gallery.has-nested-images > figure.wp-block-image {
flex-grow: inherit;
}
Thanks for sharing this!