ECP: display bug, URL

[Tim]

Hi all
http://bikecal.net/wp/event/peaks-gold-coast/

How do I force the organiser website to line wrap, but maintain the a href link.

Thanks
Tim

[Matthew]

Howdy Tim – great question!

You are right, overlapping links don’t help anybody 🙂 Here’s a bit of CSS that should do the trick:

.tribe-events-meta-group-organizer .url a {
  word-wrap: break-word;
}

Drop that in your theme’s CSS file and let me know if that works for you!

[Tim]

Hi Matt
No joy, sorry.

http://bikecal.net/wp/event/peaks-gold-coast/

All the other links are wrapping?

I even tried !important…

tim

[Matthew]

Oh, that’s interesting! When I add that CSS directly to the browser via the inspector, it works as expected:

I took a peek at your CSS and it appears as if the CSS that you added at the bottom of the file is commented out (there isn’t a closing */). Was that intended?

/* Tim's stuff
/* fix for href link in event listing, to force line break inside container.
.tribe-events-meta-group-organizer .url a {
  word-wrap: break-word !important;
}

Can you give the following a try instead?

/* Tim's stuff */
/* fix for href link in event listing, to force line break inside container. */

.tribe-events-meta-group-organizer .url a {
  word-wrap: break-word;
}

Do you get better results with that small tweak?

[Tim]

Thanks for this, fixed.

Can I suggest the standard plugin css render all links like so?

Because, the other divs for other event meta all wrap anyway (so it seems a bit weird not to wrap these links too)

Thanks for your help!

[Matthew]

I’m glad that worked for you. We will keep that fix on the radar, for sure! I’m going to close out this ticket but if you have any other questions, don’t hesitate to start a new topic!

[Author]

Posts