I want to left justify the ticket details

[David]

If I use anything but the skeleton template the Details, Organizer, and Venue information gets shoved to the right which ends up truncating hyperlinks and addresses. All I want to do is left justify but I can’t find where to make the changes.

The text also drops down, for example in the date field if I have Date:December 17 the December 17 text will be lower than the Date text. There is also no spacing between the two, it appears just as you see it above.

I don’t want to change the theme, I’ve spent too much time working on it. I’ve also read through the formatting and style sheet suggestions but that didn’t help me.

[Geoff B.]

Good evening David and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with this topic.

If I use anything but the skeleton template the Details, Organizer, and Venue information gets shoved to the right which ends up truncating hyperlinks and addresses. All I want to do is left justify but I can’t find where to make the changes.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.single-tribe_events #tribe-events-content .tribe-events-event-meta dt {
text-align: left;
}

Let me know if that helps.

Have a great day!

Geoff B.

[David]

Thanks! It looks much better, I was hoping you guys would have a simple CSS fix, I’m not experienced enough with CSS to attempt that kind of a fix myself. With that being said is there anything that could be added to make the field value move more to the left? The only field this really affects is the website address, the schools I work with tend to have rather long URL’s and they end up running into the map and getting truncated. The link still works, it just doesn’t look nice. I can leave the http:// off which will fix some sites but not others.

Thanks in advance for your help!

– David

[Geoff B.]

Hey David,

Thank you for writing back.

I am glad the CSS helped.

For the URL issue, although I totally get what you are saying, moving things to the left more would probably make it look not so good.

So there are a couple of ideas I would want to run by you:

1. You could use a URL shortener on those extra-long URLs
2. You could give the following CSS a shot to see if that works for you

.tribe-events-event-meta .tribe-events-meta-group .url {
clear: both;
padding-top: 12px;
}

Let me know if that helps.

Have a great day!

Geoff B.

[David]

Thanks Geoff, A for effort but it didn’t seem to move the URL. I think the URL shortening idea is better, I’m good with that.

Thanks!

– David

[Geoff B.]

Hey David,

I’m glad the shortener idea works for you.

In case that makes a difference, you might try adding the !important argument to your CSS
.tribe-events-event-meta .tribe-events-meta-group .url {
clear: both !important;
display: block !important;
padding-top: 12px;
}

Have a good week-end,

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts