Event Cost – Location on Page

[Mirja]

I just updated Events Calendar & Events Calendar Pro to the latest versions and now the Event Cost is listed on the far left beneath the class venue whereas before it was listed properly on the far right. I’m about to add new classes. How do I correct this?

Thank you for your assistance.

[Jeremy]

Hi Mirja,

Thanks for reaching out to us! I’d be happy to help you 🙂

Which version did you update from? The cost has been listed underneath the venue for quite a few months already.

To put it back on the far right would be a bit tricky using css only. Otherwise you may customize our template files, following our Themer’s Guide.

Please let me know if you need further explanations.

Cheers,
Jeremy

[Mirja]

Jeremy, thank you for your reply.

I see; however I do prefer the previous design. Is there a specific code I can add to CSS to move the Event Cost to the right.

I’m not a programmer and would just like my Events Calendar listing to look nice, so any guidance would be greatly appreciated. Thanks again!

Mirja

[Jeremy]

Hi Mirja,

Ok, maybe you can try to add the following CSS snippet in Appearance > Customize > Additional CSS:

@media screen and (min-width: 668px) {
  .tribe-events-loop .tribe-events-event-cost {
    display: inline-block;
    vertical-align: top;
    margin-left: 100px;
  }
  .tribe-events-loop .tribe-events-event-meta {
    display: inline-block;
    vertical-align: top;
  }
}

Please let me know if that helps.

Cheers,
Jeremy

[Mirja]

Hi Jeremy,

Thank you for your suggestion. I added the CSS Snippet and it partially worked. Oddly enough, the event cost lined up correctly on the right for two events out of three. The third lined up on the right but was not in line with the other two. So I’ve decided to remove the Snippet to keep all the event costs lined up the same even though they will be on the left.

Thanks again,
Mirja

[Jeremy]

Hi Mirja,

I’m sorry the CSS snippet I gave you didn’t work properly.

Instead of the one I gave you previously, could you try the following one?

@media screen and (min-width: 668px) {
  .tribe-events-loop .type-tribe_events {
    position: relative;
  }
  .tribe-events-loop .tribe-events-event-cost {
    position: absolute;
    top: 0;
    right: 0;
  }
}

Please let me know how it goes 🙂

Cheers,
Jeremy

[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