Events List Widget – getting events centered

[Arnie]

Hello!

I am using the events list widget to display various events in places all over my website. My one remaining issue with the display is that it automatically aligns left instead of center and I can not seem to fix this with simple css.

If there are 4 events, it looks fine and you don’t notice the difference. If there are 1-3 events, it looks off. How can I tell the widget to align the events centered?

Thanks!

[Josh]

Hey Arnie,

Thanks for reaching out to us!

Would you mind sending a link to where you’ve got some of these set up? I can try to give you a CSS solution for doing this, however depending on how things are structured it may not be a simple or quick CSS fix.

Thanks!

[Arnie]

Sure, here are some of the places I am referring to:

https://www.jewishexperience.org/shabbat/#friday-night-dinners
https://www.jewishexperience.org/locations/west-side/west-classes/west-next-level-class/#next-next-level
https://www.jewishexperience.org/locations/east-side/east-classes/east-tuesday-talks/#next-tuesdaytalks

[Josh]

Hey Arnie,

This one isn’t a simple snippet but I can help you get this sorted out by pointing you in the right direction.

First, you’ll want to remove the “width:22%” and “float:left” from “.tribe-mini-calendar-event”.

Then, you’ll want to add “width:22%” and “display:inline-block” to “.tribe-events-adv-list-widget .type-tribe_events”

Finally, you’ll want to add “text-align: center” to “.tribe-events-adv-list-widget”

You may have to get more specific on the selectors to have them apply in certain cases. Just depends on the theme and how current styles are applied.

Let me know if this helps.

Thanks!

[Arnie]

Ok thanks, I will try that – I don’t actually have access to the original css file though – I can only add custom css, so I’m not sure how I’m going to actually remove original code

[Arnie]

actually, that might be in the custom code, hah! ok i will see if i can make this work. thank you!

[Arnie]

so i did what you said and it pretty much messed everything up. can you take a look? see how the events are displaying now…
https://www.jewishexperience.org/shabbat/

[Arnie]

I had to go ahead and change it back because I don’t want users to see it all messed up. trying other methods

[Josh]

Hey Arnie,

Thanks for following up here.

Would you mind sending a screenshot of the “messed everything up” view? It’s likely that certain elements might not have been getting fully applied (overridden by other styles) depending on where the styles were added.

Thanks!

[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