Essential Grid no longer working after Wordpress Upgrade to WP 5.5

[Dracostar]

Hi guys, this is an issue that is still ongoing.

I was recommended from a previous forum to make this thread seperate.

I experienced that my Essential grid in my footer and on my homepage is not working correctly as in it is not showing at all.

Now I believe this happened when the update to Wordpress 5.5 occurred. And due to circumstances I cannot revert back.

I have done the necessary testing in the previous forum as seen here.

But the issue still persists. This is a problem as it shows my portfolio or a demo of it. I appreciate any help that can be given.

Login details as per note.

[tristup]

Hi @Dracostar,

It seems that the Essential Grid items are overridden by the minified CSS, WP Fastest Cache plugin is the reason behind the issue. I would like to request you to check by deactivating the plugin once.
Or else you can try by adding the following custom CSS code to Footer CSS of the specific footer.

.esg-grid li
{
    width: 30%;
    display: inline-block;
    visibility: visible;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Dracostar]

Hi Tristup. I did what you said, and it seems to work in the main content area in the pro-editor when I am using it. However when I view the website from the frontend view it just shows the ess grid with blank content.

As for the footer of the same Ess, it seems to be not displaying at all, but it has the shortcode inserted there. Where as in the content area it uses the Ess Grid Classic Element (but in the footer I cant seem to use it).

I also checked with and without the minify running on my cache app. And it does not affect the internal preview mode. It all seems to work the same regardless.

Screenshot attached:

[tristup]

Hi @Dracostar,

It seems that the Lazy Loading option is the reason behind your issue, by going ahead I have deactivated the option from the specific grid settings and added the following custom CSS into the Theme Options > CSS to get rid of the issue.

.eg-custom-portfolio-skin-footer-container
{
    display:none;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Dracostar]

@tristup

.eg-custom-portfolio-skin-footer-container
{
    display:none;
}

Hi Tristup,

Thanks for the fix I finally managed to get the grids showing as intended. However it seems that the animations are not running on hover, and the code I see that you gave me does hide the blue overlay, however that overlay is supposed to only show on mouse-over/hover of each individual grid item (quick video in url of how its supposed to work).

Please note the only way I could get this to function as intended is to go into the Pro Theme > Footer editor. For some reason its the only area outside of Essential grids own plugin where it actually works in its intended view.

[ruenel]

Hello @Dracostar,

Can you please disable the IP filtering on your site so that our staff can access it.
When I log in, I am seeing this:

Thanks.

[Dracostar]

Hi ruenel I have unlocked your IP address, please feel free to try again.

[Dracostar]

Hi Ruenel, I saw you got locked out again, are you using the right login details as per the secure note? And I have added your IP address as a whitelist.

[ruenel]

Hello @Dracostar,

The essential grid works as expected. You can check out my test page displaying only but the grid.

See the secure note.

One thing to note is that the Essential Grid cannot be inserted in a flexbox layout which is what you have in the footer. If you want to insert the Case Studies in a grid-like structure in your footer, you use the classic recent post element instead.

Hope this helps.

[Dracostar]

Hi Ruenel, I saw what you had to do, and I have since reversed it as that was not my original intent, but I appreciate the effort. On a whim I tried something else, I made a seperate grid again, that way I am not referencing the same grid twice on the same page. And that seemed to make the main home page content show fine.

However as you said the footer is still acting strange. Is there a way I can change that particular column in the footer so it isnt set as a “flex” item? To display my blog in a clean neat way to work with my themes design as intended?

[ruenel]

Hello @Dracostar,

Please be advised that the whole footer bar structure is using the Flexbox layout. Regretfully there isn’t an option in the footer bar container to turn OFF the flexbox. It may be possible with custom coding which is beyond the scope of our support already and may also create other conflicts or issues later on.

Best Regards.

[Dracostar]

Hi ruenel,

No problem at all I followed your advice and added the “recent post” element and modified it with some CSS to make it fit more organically into the website design. Its not the ideal fix I wanted for the footer, but will have to do. Still strange that the ESS Grid wont work within a flexbox.

[ruenel]

Hello @Dracostar,

ESS grid items were using fixed position relying on the content area of the container. The way it has been structure may be the issue why it does not display inside the flexbox layout. We already have compared adding the grid in a column with and without the flexbox layout enabled. We’ve also submitted this to our issue tracker so the developers can look at it and find a way to resolve this issue.

Thank you for your understanding.