How to Adjust Event Category / Overview Views to 80% from Full Width

[Christopher Roy]

It looks like there was some kind of update to Events Calendar PRO that overrode our theme styling again. Event category / overview listings views are now full width again and we’re not sure how to fix that easily. We have it fixed for individual event views but category views look terrible at full width.

[Edward]

Hey there Christopher!

Thanks for reaching out — sorry to hear that you are experiencing difficulties. I can try to help you out with that.

Can you give this CSS a shot, you might have to adjust the 30px since that’s just a guess.

#tribe-events-content.tribe-events-list {
padding-left: 30px;
padding-right: 30px;
}

Hope that helps!

[Christopher Roy]

Thanks.

Where is the best spot to place that CSS for this plugin?

Does this work if we change it to % rather than fixed px?

Also, can this be done somehow for month/week/photo view as well?

[Edward]

Hey Christopher!

Yes, you can use percentages here. Here’s the docs from W3C → https://www.w3schools.com/cssref/pr_padding.asp

Adding CSS via Appearance ‣ Customize ‣ Additional CSS is probably the easiest. Sometimes there will be cause to override the Tribe styles.css, but this shouldn’t be one of them.

Give this CSS a shot first, it may resolve the issue altogether:

#tribe-events-content-wrapper .tribe-events-calendar {
table-layout: auto !important;
}

Hope that helps!

[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