• Skip to primary navigation
  • Skip to main content
  • Skip to footer

WPJohnny

WordPress Performance Guides and Reviews

  • Start a WordPress site
  • Hosting
  • Themes
  • Plugins
  • Blogging
  • Marketing

Gutenberg FIX – image gallery item on last row too big

WordPress plugins Feb 5, 2020 by Johnny 7 Comments

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.

Share this post:

Share on FacebookShare on TwitterShare on LinkedInShare on WhatsAppShare on EmailShare on SMS

Read all my posts on WordPress plugins

About Johnny

Right on the edge of WordPress development! 10+ years of WordPress design, development, hosting, speed optimization, product advisor, marketing, monetization. I do all that.

More WordPress Guides

WPCloudDeploy custom hacks and fixes

RAM or CPU? Which is more important for web-servers?

Selling Ebooks vs Videos (the better info-product moneymaker?)

GoDaddy Managed WordPress Hosting SUCKS

Avoid Dropdown/Hamburger Menus (Bad Web Design UI)

Don’t use CSS frameworks with your custom WordPress theme

Reader Interactions

7 Comments

  1. Mats Sjödin

    April 23, 2020 at 10:57 pm

    Thanks a lot! It worked just fine

    Reply
  2. Scot Birch

    July 9, 2020 at 1:00 pm

    I wished Gutenburg would fix this issue. They could borrow your CSS coding in a blink of an eye and fix it.

    Reply
  3. Ladislav

    August 20, 2020 at 3:44 am

    Thank you man, it realy helped.

    Reply
  4. Peort

    November 19, 2020 at 3:24 am

    Thank you so much Johnny! This really helped me out!

    Reply
  5. Watai

    March 17, 2021 at 10:32 pm

    Thank you so much

    Reply
  6. Andreas

    August 28, 2022 at 11:48 pm

    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?

    Reply
  7. Pete Cornish

    December 22, 2022 at 9:44 pm

    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…

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

More links

  • Gadget reviews
  • Try my free WPJ plugins
  • Join the WPJ FB Group
  • WPJ YouTube & newsletter
  • Become a WPJ Affiliate

Popular Reviews

  • Best WordPress Hosting
  • Best WordPress Themes
  • Best WordPress Plugins
  • Best WordPress Cache Plugins

Services

  • Speed optimization
  • Speed optimization courses
  • WordPress hosting
  • Hire me or other experts
  • Client login

About Johnny

10+ years of WordPress design, development, hosting, speed optimization, marketing.
Contact me.

newsletter block

Copyright 2023 | WordPress guides by Johnny Nguyen

Click to Copy