Issues with Essentials Grid Cobbles Overlay

Support
#1

Hello,

We are using Essentials Grid with a Fullscreen Cobbles layout.

On our larger 2:1 images, the mouse overlay is taller than the image.

On the smaller 1:1 images the overlay is fine.

When I change to a mobile width the images stack and the overlay works fine.

Please help us to fix this overlay so that we can go live with this project.

https://explorehollywood.lainternet.biz/

Thanks,

Micah

#2

Hi Micah,

That seems to be a bug with Cobbles layout, to fix please add this to your Essential Grid’s custom CSS.

.esg-entry-cover {
	height: 187px !important;
}

Hope it helps,
Cheers!

#3

That code does not help. I played with that CSS before I posted my ticket.

First off, it’s way too short. Secondly, the desktop sizing is different than the mobile styling.

How can we fix this? Our site is live and I am demoing it for 30+ board members today in a couple of hours from now.

Micah

#4

Hey Micah,

To resolve the issue, please add the following code in the Theme Options > CSS:

.esg-grid .mainul, .esg-grid .mainul>li {
    height: auto !important;
}
.esg-overflowtrick {
    overflow: visible !important;
}

Please note that since this is a custom code that changes the default behavior/display of the extension, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

#5

Well, it kind of worked. Now the overlay matched the image but the 2:1 images are smaller than the 1:1 images.

Now I just need all the images to be the same height.

Micah

#6

Hi Micah,

Since height, have been adjusted, please use same image proportions so it will adjust accordingly.
For example, image 1:1 is 300x300, 2:1 should be 600x300. This way when it was adjusted, it will still have same height and using correct proportions.

Hope this helps.

#7

I resized the images to 600x300 and 300x300, uploaded them newly and then added them to my portfolio items.

Things are still not lining up properly.

https://www.explorehollywood.com/

Micah

#8

Hello Micah,

To resolve your issue, please use this custom css code:

.esg-layout-even .esg-entry-media {
    padding: 0;
    height: 100%;
}

.esg-layout-even .esg-entry-media img {
    display: block !important;
    visibility: hidden;
    opacity: 0;
}

Please let us know how it goes.

#9

I added the new code and it got worse.

If I use only the new code you sent and remove the previous code, it puts me back where I started. Everything lines up properly but the over is taller than the image.

Micah

.esg-grid .mainul, .esg-grid .mainul>li {
height: auto !important;
}
.esg-overflowtrick {
overflow: visible !important;
}

.esg-layout-even .esg-entry-media {
padding: 0;
height: 100%;
}

.esg-layout-even .esg-entry-media img {
display: block !important;
visibility: hidden;
opacity: 0;
}
#10

Hey Micah,

I went ahead and added the following code in the Theme Options > CSS:

.esg-layout-even .esg-entry-media {
    padding: 0 !important;
    height: 100%;
}

This seems to have fixed the issue, please clear your browser’s cache and check your page now. Cheers!

#11

Thank you, that fixed the issue.

We appreciate your help.

Micah

#12

You’re welcome. We’re glad the issue’s now solved.

#13

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