Support » Plugin: Meow Gallery (+ Gallery Block) » Difference of display between edition and visualisation

  • Resolved tipi2

    (@tipi2)


    Hello everyone,

    I am trying the Meow gallery plugin for a photo blog I am making. I wanted to give it a try before upgrading to the pro version.
    My problem is : when I am editing the page with the gallery, it looks perfects
    https://ibb.co/7CNZHtf
    but when I am visualising the page it looks awful
    https://ibb.co/ZVJ2tvs

    Any idea why I got this display issue?
    Cheers,
    TiPi

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Thomas

    (@kywyz)

    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

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

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

    Plugin Contributor Thomas

    (@kywyz)

    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://wordpress.org/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

    Plugin Contributor Thomas

    (@kywyz)

    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 8 months, 3 weeks 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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Difference of display between edition and visualisation’ is closed to new replies.