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…