Difference of display between edition and visualisation

Hello @tipi2,

It looks like your theme CSS is interfering with the gallery CSS, would it be possible to get a link to this page so that I can identify clearly what CSS is interfering and how to fix it.

Best regards,
Thomas

https://catacombes.julienreynes.fr/91-2

Here it is.
Thanks for having a look at it.
Cheers,
TiPi

Hello @tipi2,

So it seems your theme is adding the class “image-big” to images inside the gallery, giving them the style “display: block” ( among other styles ), could you try to add the following custom CSS:

.mgl-gallery .image-big {
display: inline !important;
}

Best regards,
Thomas

This solved the problem instantly!
For others who might encounter the same issue: I added the code using “Simple Custom CSS” plugin (https://www.ads-software.com/plugins/simple-custom-css/).

Thanks a lot Thomas,
This plugin looks very promising, I’ve been trying 10 different ones but this one is my preferred ??

Cheers,
TiPi

Awesome!

You could also have used the WordPress Customizer if your theme supports it ( https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ cf method 1 ).

Best regards,
Thomas

• This reply was modified 5 years, 2 months ago by Thomas. Reason: OP had already tagged its issue as resolved

I’m having the same issue with FirmaSite, a BuddyPress-compatible Theme based on Bootstrap. The problem appears to be in Bootstrap, which is a very popular framework with lots of advantages. Its CSS seems to _force_ gallery thumbnails to be display: block no matter what we do in Custom CSS, since there are no handy selectors we can be sure would only apply to galleries (and not, say, customized Buddypress Member lists with avatars).

Basically, your plugin is apparently fundamentally incompatible with any Bootstrap-based Theme the way things stand. I had to switch to the standard Gütenberg Gallery Block to tide us over. That one at least uses CSS selectors that we can manipulate more effectively and isn’t overridden with Bootstrap’s grid.

Potential workaround to my above: add a Custom CSS Class (maybe “meow-gallery-block”) to the Meow Gallery Block in the Gutenberg editor (under “Advanced”) when creating or editing the Gallery Post. You can then use CSS to override the “display: block;” and replace it with “display: inline !important;” like this:

.meow-gallery-block img {
   display: inline !important;
}

I’ve not actually tried this yet, but hypothetically it should work. Will do so when I’m done with another project.