Styling problem of single-event-view

[Bernhard]

Hello,
I’m looking for the correct css-code to fix the view off the single-event-page, organizer+phone. Phone is split over three lines while organizer is squeezed to the right. Please see for example http://staging.ubiquarian.net/event/monet-to-picasso-batliner-collection/
I could already fix the updated-date which was also aligned to the right (due to a theme-setting i guess) by adding
“span.date.updated { float: left; }”
but I can’t find any similar working for organizer+phone.

Any advise is very welcome, any more information I can provide please let me know. Thanks!

[Barry]

I think that may stem at least in part from this rule in your magazine-premium stylesheet:

.post .author, .hentry .author { float: left; }

Perhaps you could add (after that rule or simply at the bottom of the stylesheet) something like this:

#tribe-events-event-meta dt.event-label { float: none; }

Does that help at all?

[Bernhard]

Thank you! Getting closer.
It’s left-aligned now but moving the entries to the next line.

I’m still not good in css but I’ll try some more combinations, the right one must be out there!

[Barry]

If you look in magazine-premium_uqn/style.css around line 214 you can probably see this rule:

#tribe-events-event-meta dt.event-label { float: none; }

That would seem to be the problem here. Can you remove/set to float: left and see if that helps?

[Bernhard]

I’m sorry for not responding earlier I had some more important issues with the page lately. Now I’m back to this.

I’ve played around with all different possibilities I have found, finally I’m using this lines, which almost fix the styling (only the organizer is still aligned to the right, but if there’s no easy way, I’ll wait to v3, maybe the view is different in general).
#tribe-events-event-meta dd.event-meta.event-meta-phone { float: left; position: absolute; margin-top: 26px }
#tribe-events-event-meta dt.event-label.event-label-updated { margin-top: 10px }
#tribe-events-event-meta span.date.updated { float: left; margin-top: 10px }
Up to now I can’t see any bad on other sides.

[Barry]

If I try to view the problem using the link you posted initially I see only a blank page, but in any case it’s really something you would have to tinker with.

The views have indeed been changed quite radically for 3.0 and, we hope, that is not far away from being released 🙂

[Bernhard]

Thanks for your quick response.
The staging page (url posted above) is now up again, but I\’ve found a better code which fixes all issues with less code:
#tribe-events-event-meta { line-height: 16px; }
#tribe-events-event-meta dd.vcard.author.event-meta.event-meta-author { float: none; }
#tribe-events-event-meta span.date.updated { float: left; }

Thanks for your hints and the support!

[Barry]

Not at all – I’m glad you found a solution that works 🙂

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts