Essential Grid problems - hover animation and text alignment

Support
#1

Hi there. I’m trying to make a filterable grid of videos with Essential Grid and have hit some roadblocks. I searched the knowledge base on essential-grid.com and these forums, but no luck. Any advice is appreciated:

(1) Hover Animation: In my test post (“Blockstream - Bitcoin-Backed Assets”), my Featured Image is a static thumbnail and my Alt Image is a GIF. In the Item Skin Editor, I checked the box for “Alt Image on Hover”, but when I hover, it still just shows the Featured Image. The Alt Image GIF will not appear. Why is this?

Post settings:

image
image2528×1054 311 KB

Skin Editor settings:
image
image1500×796 54.6 KB

Before hover:
image
image1440×566 66.9 KB

After hover:
image
image1414×612 75.5 KB

(2) Text Alignment: How can I align text to the left when it spills onto another line? And what CSS classes can I target to make the text more responsive so it doesn’t overlap on certain screen sizes?

image
image768×410 66.9 KB

#2

Hey @one_eyed_man,

  1. I’ve replicated the issue on my end so this looks like a bug in the Essential Grid plugin. I’ll post this in our issue tracker so this case will be queued to be reported to ThemePunch.

  2. You can see the selector of the layer in the Layer Settings. Regretfully, making it responsive would required custom development and as you might already know, it is beyond the scope of theme support. Aligning the text to the left only when it goes to another line is not possible.

image

Thank you for understanding.

#4

(1) Ok, thank you for reporting that @christian.

On a possibly-related note, I discovered an issue on my homepage - I set up some Posts (Tiles) with loopers to achieve the same effect as I’m doing in the Essential Grid (static thumbnail, hover for GIF). It was working fine yesterday morning, but last night I updated from X Theme to Pro, and now when I view my site in an incognito window the homepage tiles display a white box instead of the GIF upon hover:

image
image1392×805 205 KB

Interestingly, when I view in the backend, the effect still works as expected:

image
image1728×902 322 KB

Could this issue and the Essential Grid hover bug somehow be related to my recent upgrade to Pro?

(2) Apologies, maybe I wasn’t clear. I wanted to align the text left at all times, not just when it goes to another line. (I had set the text to float left in the Skin Editor, but for some reason it was still center-aligned within its element.) Thank you for pointing out where to find the class names. This global CSS solved my issue:

.eg-video-tiles-element-4 {
	text-align: left;
}

.eg-video-tiles-element-5 {
	text-align: left;
}
#5

Hey @one_eyed_man,

I checked your home page and when I hovered, it did not turn to white. There’s no GIF playing though it’s possibly because of your image optimization.

Before we investigate further. please clear all caches then temporarily deactivate all optimizations.

image

Thanks.

#6

Thank you for the suggestion, it appears that my image optimization plugin (Optimole) was causing the issue. Thought I tried deactivating it but I guess not. I can take it from here.

Regarding the Essential Grid bug that you reported to ThemePunch, is that a fix that could potentially come in the next couple days, or could it take months? I’m trying to decide whether I should try to wait it out or give up on that feature and look for a different solution.

#7

Hi @one_eyed_man,

My colleague has already reported that, but we don’t have any idea how much time will take for that.

Thanks

#8

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