Event Calendar WIDGET is HUGE! Way larger than sidebar.

[sfatx]

We have Events Calendar PRO and are using the Event Calendar widget in a sidebar. However, the calendar in the sidebar is HUGE, way larger in width than the sidebar, almost by double…so half of the calendar (right side) is not visible. We have done lots of searching for other reports of this issue in the Forums and also in the Knowledgebase and have followed the instructions there and implemented even our own custom CSS trying to target the calendar and the table within it to no avail. None of the solutions are affecting the calendar.

I have built a page so you can see what it looks like:
https://sfatx.wpengine.com/cal-test-page/
We are about to launch the site so if that page doesn’t work when clicked, try this link instead: https://sfatx.org/cal-test-page/

REVERTING TO THE TWENTY FOURTEEN THEME DOES WORK. In that default theme, the calendar fits within the borders of the sidebar. But we are still stuck not knowing how to proceed or use the widget. The theme we are using is Divi, and we are on WP Engine hosting.

Thank you so much for your help.

[Geoff B.]

Good evening Danielle and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.

We are sorry to hear about the widget being so big on your calendar. Yikes!
I would love to help you with this topic.

As you have found out, it is very likely that some of the rules found either in Divi or one of it’s related plugins.

Either way, it should be pretty easy to fix. But, in order to do that, I would need to actually see the issue on a real live site as I am unable to reproduce the issue on my end while using Divi and none of your examples seem to still be around.

In the meantime, I believe it is worth experimenting with the first setting found under Events -> Settings -> Display (Default stylesheet used for events templates) to see if switching between Full styles and Tribe events styles helps.

Hang in there!

Geoff B.

[sfatx]

Geoff, thank you so much for the quick response. It looks like the sidebar I had on that test page got deleted somehow… I’ve added it back. Hopefully it sticks around long enough for you to check it out!

http://www.sfatx.org/cal-test-page/

Thank you again, so appreciated!

[Geoff B.]

Good evening Danielle,

I believe I have found the culprit.

It is a rule in your Divi CSS.

.entry-content tr td, body.et-pb-preview #main-content .container tr td {
padding: 6px 24px;
border-top: 1px solid #eee;
}

As you can see, this forces a horizontal padding of 24px, hence the exagerated size.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.tribe-mini-calendar td, .tribe-mini-calendar th {
padding: 0 7px!important;
}

Let me know how that goes.

Best regards,
Geoff B.

[sfatx]

Geoff,

You rock. That did it. Funny thing is I had that style in my CSS already but without !important. I really appreciate your help, looks great now.

https://www.sfatx.org/cal-test-page/

Have a good one!

[Geoff B.]

Good afternoon Danielle,

I am super stoked that did it for you!

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a good easter weekend!

Geoff B.

[Author]

Posts