Docs

[eldavas]

Hello,

I have a tab element with 4 tabs that i’m using to display 4 diffrent essential grids in an organized way. The problem is that when i change tabs the grid doesn’t show properly.

Also, i just updated my theme to the latest version and suddenly my menu is not working on mobile.

I’ll send you my credentials for my website on another message

Thanks

[eldavas]

This reply has been marked as private.

[Zeshan]

Hi there @eldavas,

Thanks for writing in!

To fix the Essential Grid issue in tabs, please try adding following CSS code under Custom > CSS in the Customizer:

.x-tab-content>.x-tab-pane:not(.active) {
    height: 0 !important;
    overflow: hidden;
    padding: 0;
    display: block;
}

As for the menu, I’ve checked it on a mobile and it’s working fine. Would you mind confirming the issue again? Perhaps, you can provide us with some screenshots so we can take a closer look.

Thank you!

[eldavas]

Thank you, the code you provided helped but the grids are not showing properly when i change tabs. Also i noticed that when i change windows on my browser and come back to my website the grid changes again.

As for the menu, i checked again and some links do work fine on mobile but some of them just close the menu after i tap on them on my iphone. I noticed that if i tap on different areas the link will eventually work but it wasn’t like that before.
The menu links that won’t work vary depends on the page. For instance, if you’re on the page idieselcore.com/lista the links that behave in a weird way are ‘Requisitos’ and ‘Contactanos’

Thank you for your help

[Paul R]

Hi,

Masonry grid doesn’t work well inside tabs.

You need to disable it to make it work inside tabs.

Thanks

[eldavas]

Ok, so i got rid of the tabs. However, now i need help with a couple of issues:

1. Is there anyway i can make the images have the same height? I tried one option i found online and it works but it’s chopping the images plus the hover element it’s not showing anymore.

2. There’s an error im getting on the console when i click anywhere on the page and i think it’s messing with the way the essential grid looks. I’ve been trying to figure out what is causing it but i got nothing. Any idea what it is?

Thank you for your help

[Jack]

Hi there,

Thanks for writing back!

1: Can you post a link to the solution you’ve currently used? Maybe we can modify that to get it working for you. 🙂

2: I’ve checked the site but I don’t see a error in the console on any of the pages (screenshot attached), are there any specific replication steps to reproduce the issue?

Thank you!

[eldavas]

Thank you for your reply,

1. I searched in google for a way to achieve same height images and i found several solutions from different sources and the only one that did something was this:

.esg-entry-media {
padding-bottom: 60%;
}
.esg-entry-media img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

That’s what i’m currently using and it kinda works but the images are chopped and when i hover over them the zoom icon for the lightbox it’s not showing anymore.

2. I attached a screenshot where you can see the error. When the page first load there’s no error on the console, but if you click anywhere on the page the error appears. You have to click something, even white space, for the error to show.

Thanks

[eldavas]

Attached is the screenshot for the error on the console.

[Rue Nel]

Hello There,

The custom css may have contributed another issue in which the lightbox icon is no longer showing. The best way to resize the image according to a uniform height, please go to Settings > Media. Increase the size of the thumbnails, let’s say you can set it to 200×200 pixels and enable the hard cropped. After saving the changes, you need to regenerate the thumbnails (https://wordpress.org/plugins/regenerate-thumbnails/). Once the thumbnail images has been changed, you can proceed to edit the Essential grid and make sure that the image source for the grid is set as thumbnail so that the newly set thumbnails hard cropped 200×200 pixels will be used.

Please let us know how it goes.

[Author]

Posts