Gallery images beneath each other

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!

Comments

  • 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

  • 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.

  • 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

  • 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!

  • Hi,

    I haven't heard back on this issue in quite a while. The galleries and columns on my website still aren't showing correctly. Neither on desktop and on mobile. https://oktoberdots.com/de-mooiste-herfst-roadtrips-2023/

    The code you provided used to work, but you guys helped me with the recipes not showing on my blog and now that code doesn't work anymore either.

  • Sorry, somehow I overlooked your previous message.

    Please send us the WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact, and we will check what might be the reason.

    Notice!

    Please attach a link to this forum discussion.

    Sending incorrect or incomplete data will result in a longer response time.

    Therefore, please ensure that the data you send are complete and correct.

    Thanks

  • We found the root cause.

    You had the Block library disabled in Performance options.

    As soon as I enabled it, the gallery started to work correctly.

    Please check it out.

    You can also remove the CSS code I previously sent you.


    Best regards

  • Ah thank you so much for all of your help! It looks amazing now, thanks!

  • I am happy that I could help.

    Also, again, my apologies for the delayed reply.


    Best regards

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.