Can I have the events at the same size – equal high – in Photo view?

[Paula Terpstra]

Hi there.

I have looked at some websites which you mentioned through your website and one of them is https://www.milkwood.net/courses/. I like the way how they have set their page. I am using Photo view of Event Calendar Pro too and I was wondering how I could change the page so that all photos on the same line are right next to each other and at the same high. And not the middle one a little higher and the next one a little less high.

Looking forward to see your reply,

Skiwi

[Geoff B.]

Good evening Skiwi and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

Taking a look at their website, the way to achieve equal height for each box of the photo view requires:

• Fixed height for the description area
• Titles and details that never go over 2 lines
• Limited number of characters in the excerpt area

As I don’t have the exact URL of your website, it’s hard to give you a precise CSS rule that will work on your website.
But I can give you theirs as a starting point:

.tribe-events-list-photo-description {
height: 140px;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Paula Terpstra]

Thank you Geoff, the exact URL of my website is http://www.vrijetijdbarneveld.nl. And the exact URL to my webpage with the events is http://www.vrijetijdbarneveld.nl/events/.

[Geoff B.]

Good evening Skiwi,

Thank you for writing back and for the exact link.

First, I am noticing that your different featured images do not all have the same ratio (starting with the height).
You will need a rule that fixes that. You might want to adjust it, but I would start with:

.tribe-events-photo-event .tribe-events-event-image {
max-height: 192px;
overflow: hidden;
}

Secondly, it appears that your date and start time are inconsistent across events (some on 1 line, some on 2 lines).

You could:

1. Remove the time from the view via a template customization. You might want to read our Themer’s guide to get a sense of how that works.
2. Make the font for both the time and the date smaller so that it always fits on one line

.tribe-events-photo-event-wrap .tribe-event-schedule-details .tribe-event-date-start, .tribe-events-photo-event-wrap .tribe-event-schedule-details .tribe-event-time { font-size: 12px}

Finally, it looks like some of your event descriptions are longer than others.

There are a few ways you can control that, but the simplest is through the excerpt field in the Edit event screen.

Let me know how that goes.

Best regards,
Geoff B.

[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