[Resolved] Gutenberg Image gallery – mobile

[Vera]

Hi,
I use a three-column Gutenberg image gallery that I would like to turn into a one-column image gallery on mobile. I added the following CSS:

@media (max-width: 768px) {
.wp-block-gallery .blocks-gallery-grid li.blocks-gallery-item {
width: 100%;
}
}

And this works fine, except that for some reason, on mobile, every second image is smaller than the previous or following image. Can you please have a look and help me fix this?
Thanks in advance!
vera

[David]

Hi there,

try updating your CSS to this:

@media (max-width: 768px) {
    .wp-block-gallery .blocks-gallery-grid li.blocks-gallery-item {
        width: 100%;
        margin: 0 0 16px;
    }
}

[Vera]

Works like a charm! Thanks so much, David!

[David]

Glad to hear that!

[Author]

Posts