Text Alignment on Event Details

[ignitedbytruthadmin]

Hi Guys,

Loving Event Cal Pro so far, but I’m having some text alignment issues. All the event and venue details are out of alignment with their field labels. They are all shifted down about 5 pixels, and jammed up against the labels with no margin on the left.

And in the venue details the phone and web site fields are shifted way to far to the right, so they are getting clipped by the map display.

Here’s an example page: http://50.87.22.108/event/2016-speaker-series/
I’m also attaching a screen shot.

I using the Moneyflow theme from mythemeshop.com. Thanks for your help!

[Geoff]

Hey there and thanks for getting in touch! I’m really stoked to hear you’re loving the plugins so far. 🙂

Ack, I hate it when theme styles and plugin styles conflict with one another! We can totally clean things up though.

Do you happen to have a live link where I can view the page? The screenshot helps but since this is a theme styling conflict, it would be awesome to view the code source so I can pin down the exact conflicts and some CSS to clean it up.

If that’s not possible, then I think this post would be super helpful because it walks through how to identify which classes are being used and what would need to be edited.

Cheers!
Geoff

[ignitedbytruthadmin]

This reply is private.

[Geoff]

Thanks so much for the extra info! That’s super helpful.

Try adding this to your theme’s style.css file or by using the Simple Custom CSS plugin:

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

.single-tribe_events #tribe-events-content .tribe-events-event-meta dd {
position: relative;
top: -4px
}

Here’s a screenshot of how that looks when I tested it out. Will that work for you as well?

Thanks!
Geoff

[ignitedbytruthadmin]

Hey Geoff,

Thanks so much. That’s much better on the vertical alignment. But it’s still clipping all the details right around the 11 or 12 character mark, even in your screen shot. The dates, times, email and web site are all truncated so the full text can not be read. (Screen shot attached.)

How can I reduce the horizontal spacing between the field labels and the field content. Or is there a hard width set on the event details field that’s causing the clipping? I just need to make those important details visible.

Thanks again for the help!

[Geoff]

Hey there! Let’s try this instead:

.single-tribe_events #tribe-events-content .tribe-events-event-meta dt {
text-align: left;
width: auto;
margin-right: 10px;
}

.single-tribe_events #tribe-events-content .tribe-events-event-meta dd {
position: relative;
top: -4px
overflow: visible;
}

Here’s a screenshot of how that should look.

Cheers!
Geoff

[ignitedbytruthadmin]

Man, so close. On both Chrome and Firefox, the web site fields for both the event and the venue are still getting clipped. But I see in your screen shot, those fields are dropping to the next line, which is what I really want.

I’m testing in Firefox and Chrome on Mac OX. What browser is your screen shot from? I’d love to find a universal fix for those two fields.

Thanks!

[Geoff]

OK, I think this will do the trick:

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

.single-tribe_events #tribe-events-content .tribe-events-event-meta dd {
position: relative;
clear: both;
}

Here’s what I get when testing in Chrome — hopefully that gets us where we want!

Cheers,
Geoff

[ignitedbytruthadmin]

That did the trick! I did have to add the overflow:visible statement back into the dd class, as it was still clipping the last few pixels off of the venue web site URL.

So my final CSS looks like this, for anyone else having similar issues.

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

.single-tribe_events #tribe-events-content .tribe-events-event-meta dd {
position: relative;
overflow: visible;
clear: both;
}

Thanks so much for the help Geoff. You are so money, and you don’t even know it! (Well, technically you do this for a living… so I guess you do know it… but still… Awesome!)

Thanks!

[Geoff]

Nice! That’s fantastic and I’m so glad to see everything working so well. Thanks a ton for not only following up to let me know but sharing the final solution here for others as well. 🙂

I hope you keep on enjoying the plugins — and, definitely let us know if you bump into any other questions and we’d be more than happy to help.

Cheers and have a great day!
Geoff

[Author]

Posts