One column gallery images on mobile inside Grid block

Hi there,

WP changed the markup for the gallery - there is no longer a 'blocks-gallery-item' class in the new markup. Instead it uses a wp-block-image class.

Try this instead:

.wp-block-gallery .wp-block-image {
    width: 100% !important;
}

I used important here as the alternative is to make your CSS more specific then the spaghetti code that core produces which would be something like this:

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
    width: 100%;
}

Thanks, David. Now I just need to increase the gap between the images. I tried the code below, it works, but the default 3 column display has now changed to a 2 column one. Any idea why?

.wp-container-2 {
	grid-gap: 16px !important;	
}

Hi Dorin,

You’ll need to take into account the gap into the width of the images as well.

For instance, try this CSS:

@media (min-width: 769px) {
    .wp-container-2 {
        grid-gap: 16px !important;
    }

    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
        width: calc(33.33333% - 16px);
    }
}

Kindly let us know how it goes.

Brilliant stuff, Fernando. Thanks so much.