Archived topic
Gutenberg Image gallery - mobile
3 replies · Started by Vera on December 5, 2020
Viewing posts 1–4 of 4
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
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;
}
}Works like a charm! Thanks so much, David!
Glad to hear that!
This archived topic is closed to new replies.
