Event list widget in columns

[Felix]

Hi,
I would like the event list widget to display events in three columns without having to create multiple widgets and filter by different event categories.

Like this or similar:

Event 1 | Event 2 | Event 3
Event 4 | Event 5 | Event 6

Could you provide CSS code for the current version or can you suggest another solution?

Thanks!

[Geoff B.]

Good evening Felix and welcome back!

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

Ideally, to do that I would need a URL where your list widget is displayed.
That way, I could provide you with actual code.

With that in mind, you could accomplish that by making sure that each event div in that widget is displayed as an inline-block, floating left while taking half of the width of the container it’s in.

Let me know if that helps.

Have a great day!

Geoff B.

[Felix]

This reply is private.

[Geoff B.]

Good afternoon Felix,

Thank you for the info and for the invitation to login.
Unfortunately, our policy does not allow us to log in to clients websites for several reasons, including liability.

That being said, to get you started, you will need to add a CSS rule such as

.widget ol.vcalendar .type-tribe_events, .widget ul.vcalendar .type-tribe_events {
width: 31%;
float: left;
display: inline-block;
}

Of course you will most likely need to tweak this to display properly in all contexts (responsive, layout), but I believe it’s the correct first step.

Let me know how that goes.

Best regards,
Geoff B.

[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