|
tneumann
|
November 18, 2015 at 12:13 pm
I am using the EE4 Events View Grid Template, calling it via a short code from within a site page. I would like to be able to VERTICALLY center the hover text within each of the grids.
I have been able to do this with adjusting margins on the text, but this is inconsistent at best and does not accommodate varying lengths of text as an Event Name.
Is there a more elegant / dynamic way of vertically centering the hover text in each of the ee_grid_box(es)?
Thanks!
|
|
Lorenzo Orlando Caum
|
November 18, 2015 at 12:38 pm
Hi, could you share a link to a page with the Events Grid Template Shortcode so we can share feedback?
Thanks
—
Lorenzo
|
|
tneumann
|
November 18, 2015 at 12:47 pm
Sure…
http://softlitestudiossandbox.com/event-grid/
Thanks!
|
|
Lorenzo Orlando Caum
|
November 19, 2015 at 7:53 am
Hi, could you give this a try?
div.ee_grid_box.item span h2 { font-size:13px; }
div.ee_grid_box.item span h2 span > br { display:none; }
div.ee_grid_box.item span h2 span b.button-text { display: block; margin-top:15px; position: relative; top: 50%; transform: translateY(-50%); }
div.ee_grid_box.item span h2 span b.title { display: block; display: block; position: relative; top: 50%; transform: translateY(-50%); }
Thanks
—
Lorenzo
|
|
tneumann
|
November 19, 2015 at 10:17 am
Hi Lorenzo,
I have implemented the supplied code in my Child-Theme, the effect is that all the link text is now forced to the top of each feature image in the grid. Still hoping to get it centered vertically…
Thanks!
Tim
|
|
Lorenzo Orlando Caum
|
November 19, 2015 at 10:25 am
Hi Tim,
Sorry about that. It looked okay in Safari developer tools but I now see that its shifted upwards.
Could you remove it and then reply here so I can give this another try?
—
Lorenzo
|
|
tneumann
|
November 19, 2015 at 10:28 am
No problem!
Removed per your request…
Thanks,
Tim
|
|
Lorenzo Orlando Caum
|
November 19, 2015 at 10:39 am
Hi Tim,
Are there any caching services in use? If so, could you clear them as I still see the text appearing towards the top of an individual grid item and I’ve cleared my browser cache:
http://cl.ly/image/0z0N173J2p2n/Screen%20Shot%202015-11-19%20at%2012.36.44%20PM.png
I’m also seeing the same thing in Firefox.
—
Lorenzo
|
|
tneumann
|
November 19, 2015 at 10:43 am
Hi Lorenzo,
I am not using any caching plugin(s), so I don’t believe that’s the issue.
Immediately after applying the css changes suggested, I saw an immediate effect in the display of the link text in the grid, as soon as I reverted to the prior css I noted that the display went back to it’s default behavoir. I am seeing direct effects correlating to CSS changes, so I think you are seeing the way it is working as of right now…
Thanks,
Tim
|
|
Lorenzo Orlando Caum
|
November 19, 2015 at 11:13 am
Hi Tim,
This CSS should be an improvement:
div.ee_grid_box.item span h2 { font-size:13px; }
div.ee_grid_box.item span h2 span > br { display:none; }
div.ee_grid_box.item span h2 span b.button-text { display: block; margin-top: 20px; }
div.ee_grid_box.item span h2 span b.title { display: block; margin-top: 40px; margin-bottom: 10px; }
Preview:
http://cl.ly/image/1h1x021V3J1l
—
Lorenzo
|
|
tneumann
|
November 19, 2015 at 11:23 am
Hi Lorenzo,
It is certainly better and I appreciate your efforts. I guess my concern is this…if the length of the title differs measurably from one event to the next, then the proposed fix doesn’t exactly fit the situation.
Is there not a way to dynamically center the hover text in the available ee_grid_box space where the length of the hover text for each event will be taken into account?
Thanks,
Tim
|
|
Lorenzo Orlando Caum
|
November 19, 2015 at 11:37 am
Hi Tim,
Unfortunately, I’m not a designer so I don’t have an exact fix for you.
—
Lorenzo
|
