Meow Gallery thumbnails not responsive on mobile

  • Resolved bibo64

    (@bibo64)


    4 years, 1 month ago

    Hi,
    I like your plugins very much and I am presently using Meow Gallery, Lightbox, Perfect Images and Custom Links. Everything works fine except thumbnails dimension in mobile view (desktop and tablet are ok): no matter how I try, they always occupy screen’s full width. I am using a Square layout on the Neve theme; PHP, WordPress and all plugins are updated. I think it is a MGL problem because if I replace your gallery with a standard WordPress gallery, thumbnails have the correct dimensions and layout (two columns in mobile portrait mode). Also the problem should not be theme related, because I get exactly the same results replacing Neve with WordPress Twenty Twenty-One Theme. Can you please help me figure out how to solve the problem? Thank you

    Fabrizio

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello @bibo64,

    I just had a look to your website, I could find the square galleries, but I was unable to see the captions.

    Could you please give me the link to a page where the problem occurs?

    Best regards,
    Thomas

    Thread Starter bibo64

    (@bibo64)

    Hello Thomas,

    thank you for your reply. I just gave you the link to the home page because the problem is already visible there, but it affects all pages with galleries, so all pages of my website except Biography (which has no gallery).

    The problem I am facing concerns thumbnails dimension in the galleries, not captions, which I rarely use anyway. Everything is fine in desktop and tablet views: 5 columns of thumbnails properly dimensioned and aligned. But on mobile view, portrait mode, both real physical device and WordPress or Firefox simulations, I get giant squares occupying the full width of the screen instead of the expected 2 or 3 columns of thumbnails. I repeat: this happens only in mobile view, portrait mode. In landscape mode thumbnails do get properly resized and aligned.

    As per settings: MGL “Optimization” is set to “Responsive Images (src-set)”; Media settings is set to “Crop thumbnail to the exact dimension (150px both width and height)”, however unflagging this option produces no changes in behaviour. I tried changing gallery layout and the problem occurs with all of them, except Tiles which correctly shows thumbnails even on mobile. I tried disabling my custom css to the website; disabling all plugins except Meow ones; updating Meow Gallery to 4.0.8: the problem persists.

    Best regards

    Fabrizio

    • This reply was modified 4 years, 1 month ago by bibo64.
    • This reply was modified 4 years, 1 month ago by bibo64.

    Hello @bibo64,

    Sorry my bad, I misunderstood your issue!

    Well this is actually not a “bug” but more the intended behavior, you can try to add the following custom CSS to override this:

    @media screen and (max-width: 360px) {
    .mgl-square .mgl-item {
        width: 50% !important;
        padding-bottom: 50% !important;
    }
}

    This should keep it on 2 columns instead of one ??

    Best regards,
    Thomas

    Thread Starter bibo64

    (@bibo64)

    Hi Thomas,

    this is it! It is exactly what I wanted to achieve. Thank you very much for your help! Have a good day

    Best

    Fabrizio

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Meow Gallery thumbnails not responsive on mobile’ is closed to new replies.