Envira Gallery thumbnails change shape

Support
#1

Hi Guys.
So the Envira Gallery plugin I’m using on my X-Theme website is displaying thumbnails that are changing shape when you hover over them.

When you hover over them at certain screen sizes, (usually if the width of the browser is a little smaller than full screen) then the height of the thumbnail will decrease slightly and then increase again. It makes it look like there’s a slight glitch in the CSS.

Can you advise how to fix this?

#2

Hi there,

Thanks for writing in.

I see a small bit of change but would you mind adding this CSS to your global custom CSS?

.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item img {
    transition: unset !important;
}

Thanks!

#3

Thanks for that. I’ve added the CSS.
But it hasn’t helped with the problem.

Anything else I can do?

#4

Hi There,

You forgot to close the curly bracket(}) in your custom CSS.

Please find this custom CSS:

@media (max-width: 767px){ /*when screen size is 480px or less*/
.contactblurb{
  padding-top: 5% !important; /*0 is top and bottom padding while 10% is right and left padding*/
}

And change to this:

@media (max-width: 767px){ /*when screen size is 480px or less*/
.contactblurb{
  padding-top: 5% !important; /*0 is top and bottom padding while 10% is right and left padding*/
}
}

Let us know how it goes!

#5

Still no difference guys.

#6

Hi There,

There’s still one custom css left that is missing a close curly bracket.

Please find this CSS

/* This stops the bottom border appearing on mobile*/
@media screen and (max-width: 979px) {
    .hm5.x-bar-container {
        position: relative !important;
        width: 100% !important;
    }
  .hm4.x-bar {
        border: none !important;
    }

and change it to this

/* This stops the bottom border appearing on mobile*/
@media screen and (max-width: 979px) {
    .hm5.x-bar-container {
        position: relative !important;
        width: 100% !important;
    }
  .hm4.x-bar {
        border: none !important;
    }
}

Hope it fixes the problem.

#7

Great, thanks guys that’s done the trick.
I have one more issue though with the gallery and thats that the lightbox when you click on an image shows blank thumbnails underneath.

Any idea why this is happening?

#8

HI again,

You’ve an invalid JavaScript in Appearance > Customize > Custom > Edit Global Javascript which is breaking JavaScript on your site. please find and remove this line:

It should solve the issues ?

Let us know how this goes!

#9

Hi there, i’ve removed this line, but it’s made no difference to the thumbnails not appearing.

#10

Hey There,

I am another staff checking in. When I checked your site, I did not noticed any change in the gallery images when you hover over them.

Do you have any caching plugin? Please clear all your caches.

By the way, Pro 1.2.7 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#11

[/details]

#12

Please give us WP Admin access to your site so we could check the back-end setup.

Thanks.

#13

No worries, I’ve put it in the private area

#14

Hey @smallsaul,

I see you’re using outdated versions of Pro and the bundled plugins. The issue could be version incompatibility. Please update Pro to the latest version first then deactivate the bundled plugins, update them then reactivate again.

Let us know if the issue persists.

Thanks.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.