• 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 4 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:

FacebookTwitterLinkedInWhatsAppEmailSMS

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

Should You Trust a Small Webhosting Company?

Stop Trying to Monetize off Google Ads

Noob Guide to Gutenberg

Local-load Google webfonts in DIVI (in just 5 minutes)

How to Get an IM Mentor – help us help you

How to Make Money With a Blog

Reader Interactions

4 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

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
  • Watch my YouTube videos
  • Subscribe to my newsletter

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 2021 | WordPress guides by Johnny Nguyen

Click to Copy