For Essential Grid can all boxes be the same height and display the title below without hovering?

Support
#1

Hi, I’m using Essential Grid to display 41 logos, each with a URL link and a title, and I’d like them to be displayed all at the same height and with the title showing underneath without having to hover over it to see it. I’ve used the Masonry style as the Even style wasn’t displaying the title under the logo, you had to hover over it to see it. The problem with this though is that some of the titles are shorter than others and so the masonry effect happens, but I don’t want the layout to look all staggered, I want them to all be the same height. Is this possible to do?

Also, I’d like them to all have their own URL when you click on the image/text.

I’ll put the URL link in a secure note as it’s on a temp link.

Thanks!

#2

Hi @core365,

Thanks for reaching out.

Could you try the even layout instead of masonry?

Thanks!

#3

Hi, I’ve changed it to Even as you suggested, but the text is now only visible when you hover over the logo, whereas I want it to be displayed on there under each logo without having to hover. Also, the URL link isn’t working - the link is on the Alfa Romeo logo.

Thanks!

#4

Hi There,

Please add this custom CSS under Theme Options > CSS:

.esg-grid a {
    z-index: 99999 !important;
    position: absolute;
    width: 100%;
    height: 100%;
}

Would you mind providing us with your admin account so we can take a closer look?

Thank you.

#5

Hi, thanks for the code, the URL is now working on the title! Is there a way to do it where the URL link works on the image too?

I’ll put the admin details in a secure note.

Thanks!

#6

Hey @core365,

I’ve switched it back to Masonry and in Grid Settings > Columns, I switched the Setting Mode to Advanced to enable the Min Masonry Content Height option which allows you to set a minimum height for the grid items so they’ll display like the Even grid.

If one of the grid item exceeds the minimum height though, you need to adjust the min height per device width accordingly.

Hope that helps.

#7

That’s fab! Thank you so much! I really appreciate the YouTube walkthrough too.

Just one other thing, is it possible for the image to be a URL link too so you can click on either the title or the image?

Thanks!

#8

You’re welcome. You will need to edit the skin to activate the link for the media. That is the correct method for activating the link for the title also.

#9

Hi, thanks for doing that, it’s great! I’ve changed the links to go to a URL, as I want them to link to existing pages I’ve created. I’ve put the page link for the ‘Alfa Romeo’ in the Essential Grid, in the ‘Item Settings’ for the field ‘Link To’ but it’s not working. It looks like it’s linked to something because when you hover over the image or the title the little hand pointer appears, but when you click on it nothing happens!

I have no idea where else I’m meant to put the URL for each logo, hope you can help!

Thanks!

#10

You need to Link To the Post.

URL would require extra setup. See https://www.themepunch.com/essgrid-doc/grid-item-links/

Hope that helps.

#11

Excellent! Thank you! I really appreciate all the time and help you’ve gave me!

Thanks!

#12

You’re most welcome!

#13

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