CSS Theme Conflict

[Seth]

Hi there,

I have a conflict with my theme (Vertex) with Events Calendar Pro. Any known CSS (or other) fixes that would help this. As you see when you browse over an individual event, the excerpt and the photo, etc. are all off.

For an individual event page, this is the same x ∞ . Thanks much! Example

[George]

Hey Seth,

Sorry you’re running into these issues – I checked out your links and adding the following CSS helped the layout for me:

.tribe-events-tooltip p.entry-summary {
    position: relative;
}

Try that out and see if it helps – adding it to the bottom of your theme’s style.css should be a good place to start. If it doesn’t help at first, try adding !important to the rule like this:

.tribe-events-tooltip p.entry-summary {
    position: relative !important;
}

Here’s how that helped for me → https://cloudup.com/cWKohzlFSpa

Let me know if that helps!

— George

• This reply was modified 11 years, 2 months ago by George.

[Seth]

Hey, that’s a good start! Yes, so now the month calendar view is in good order. Any ideas for the individual event pages? http://josephy.org/upcoming/painting-with-dennis-reinke/ I think I’ll disable related events, so that helps a bit.

[George]

Awesome! Glad to hear it.

As for the single pages, sorry I missed that in my first reply, I thought my original CSS would help there – and, in fact, it’s pretty close: basically, it seems that your theme is setting absolute positioning for anything with the .description class, so if you see wonky layout issues, that’s a likely culprit.

I’d recommend getting and learning to use a tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome – all you really need to learn is the “Inspector Tool”, which is very simple and easy to use. You can use it to hover over the element on your page that has the weird layout issues, and see what the problem is.

So, for example, when I did that on your individual event pages, that’s when I noticed the .description absolute-positioning bug that’s the problem here.

Which now leads to the CSS that should help! 🙂

.tribe-events-single-event-description.description {
    position: relative;
}

Apologies for a long-winded reply here, just wanted to try and do a bit of the old “teach a person to fish” instead of “give a person a fish” mentality, you know? I really hope you do look into those development tools I mentioned above, they’re fun but can also really take your power as a site owner / content producer to the next level.

Let us know if you have any other questions or concerns here – if not, and if that CSS I posted in this reply helps you out, then I’ll go ahead and close this ticket up.

I hope this CSS helps – let us know!

— George

[Seth]

Excellent, George! Thanks so much. I’ve just been getting used to the developed tool on Chrome – it’s quite amazing. Have a great weekend (Friday the 13th + Valentines + Washington’s Birthday)

[George]

Glad this helped Seth! Hope you had a nice weekend yourself! 🙂

For now, I’ll go ahead and close up this ticket. If you have any other questions or concerns, don’t hesitate to return to the forums and ask for further assistance with things.

Cheers,
George

[George]

Hello,

This issue’s been sitting here a while so I’m going to go ahead and close it for now – if other issues arise, don’t hesitate to come back and open a new ticket, and if you need to open a new ticket about the same issues you originally brought up here, please share a link to this original ticket so we can pick up where we left off.

Cheers!
George

[Author]

Posts