Gallery images beneath each other

Oktoberdots · November 18

Hi!

I've recently installed your theme but now all the images in my blogposts are beneath each other instead of next to each other (for example: https://oktoberdots.com/de-mooiste-herfst-roadtrips-2023/)

I've not made those posts with the BeTheme builder, because I already had hundreds made before switching themes. So without having to rewrite all of them, is there a way (CSS or PHP code snippet preferably) to make the image galleries display correctly?

I already disables all the not supported plugins, deleted the cache and switched from Child theme to Parent one, but that didn't solve my issues.

Thanks for you help!

Phil · November 20

Hi,

Try the following CSS code:

figure.wp-block-gallery.has-nested-images{
 display: flex;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

Oktoberdots · November 21

Hi Phil,

Thank you! This works on some galleries but not all and the images get resized in a weird way, one big and one small.

Does this code also work for columns? Because they're not showing right either.

Phil · November 21

Try this CSS code instead of the previous one:

figure.wp-block-gallery.has-nested-images{
 display: flex;
 align-items: center;
}
.wp-block-gallery figure{
 width: 50%;
}

Best regards

Oktoberdots · November 21

Hi Phil,

Almost there! I added the code and fixed the columns by using the same code but with .wp-block-columns so that's all good now.

But the images still aren't the same size: they have different heights.

Preferably I want them to be the same height and width but not stretched. Just covered.

(I photoshopped the bottom screenshot to show what I mean)

Thank you!

Gallery images beneath each other

Comments