Event formatting – placement of buttons and background boxes, mobile vs desktop

[Curtis]

Hi Events Calendar Support,

I’m a new subscriber, and I’m currently developing a test site using your plugin. I’m using the Karma theme, which I know others on the forums have mentioned before, although I’m having some difficulty finding threads relevant to my formatting situation. I prefer your advanced formatting options over Skeleton Styles, but whenever I choose the Full or Tribe Event Styles options, there seems to be some sort of alignment issue with my theme. The white background boxes that should frame just the Details and Venue sections cover most of the page’s content, and the Google / iCal import buttons float to the top of the page. What’s interesting is that everything seems properly formatted when you view the site with a mobile layout; the problem only occurs with the desktop layout. You can see it in action here: http://shivashakti.tinymainehomestead.com/event/silence-simplicity-retreat-2017/ (and you can resize the responsive theme to get a sense for how the formatting changes).

I’ve tried pretty much every combination of the Full and Tribe Event Styles with the various options listed in the Events Template. What I’m wondering now is if there are any CSS values I could try to manipulate to address this? If you have any suggestions as to where to start, I’d appreciate the help.

Otherwise Skeleton Styles does work, but I would, in that case, like to find some way to change the formatting of the information presented in the Details and Venue section so that it pops. Again, any leads to this end would be appreciated.

And if any answers to these questions can already be found in the forum, please feel free to point me in that direction. Thanks so much, and Happy New Year!

– Curtis

[Geoff B.]

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

Thank you for reaching out to us.

We apologize for the inconvenience caused by this glitch impacting our single event view.
We are actively working on a fix for this.

Unfortunately, I cannot commit to a release date for a fix at this point.

But you will be contacted as soon as there is one.

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

.tribe-events-event-image {
float: none !important;
}

Thank you for your patience as we see this through.

Best regards,

Geoff B.

[Geoff B.]

Actually, forget my previous suggestion. Try this instead:
.tribe-events-event-image+div.tribe-events-content {
width: 100% !important;
}

Have a great day!

Geoff B.

[Curtis]

Hi Geoff,

Thank you so much! That second bit of CSS worked! This is fantastic.

I very much appreciate your help!

Yours,
Curtis

[Geoff B.]

Good morning Curtis,

I am super stoked that this worked out for you.

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Nico]

Hi there!

Just wanted to share with you that a major release of our plugins is out, which includes a definitve fix for this issue 🙂

Find out more about the release → https://theeventscalendar.com/things-to-be-aware-of-in-version-4-4-of-the-events-calendar-event-tickets-and-premium-add-ons/

Best,
Nico

[Author]

Posts