Calendar Widget width

[Hello]

Hi,

I’m using the pro calendar mini widget on a site I’m developing and have a width issue.
You will see what I mean if you go here: http://www.hellohorsham.com/
Scroll down and the widget is in the left sidebar at the bottom.

The events below are the right width but the calendar itself is spilling over into the central area.
I’ve tried using shortcode and putting in <div> with width and max-width set.
I’ve also tried overwriting the css with .tribe-events-adv-list-widget and setting width here.

Not sure where to go next. Any ideas?

[Geoff B.]

Good evening and welcome to the Events Calendar Support forum!

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

The issue is your theme’s padding values for TH and TD elements (in tables)

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

#main-content .entry-content .tribe-mini-calendar thead th, #main-content .entry-content .tribe-mini-calendar thead td {padding: 9px 0px !important}

Let me know how that goes.

Best regards,
Geoff B.

[Hello]

Hi Geoff,

Thanks for the response. I pasted the css into custom css are in the site.
I’m afraid it didn’t fix it, it made it slightly smaller vertically but no difference to width.

I need it to be max 220pixels wide. Funny thing is when I first put the widget into a sidebar on a standard Divi homepage it displayed at the width above.

However I needed to change to Divi builder with a 1/3 | 2/3 column arrangement.
I then made the 1/3 column into a sidebar and it was then that the calendar displayed too wide.

I tried putting a border round the widget which shows it at 220px but the calendar still overflows.

Hopefully you can help.

Kind Regards

[Geoff B.]

Good morning,

Thank you for writing back.

I am sorry that this exact rule did not cut it.
However, the cause of the issue is the padding on the TH and TD that come from Divi’s CSS.

So in other words, it is not related to the max-width aspect.
Can you also add this other rule ?

.entry-content .tribe-mini-calendar tr td {padding: 0px !important;}

I believe that should solve the issue for good.

Best regards,

Geoff B.

[Hello]

Fantastic, thank you very much 🙂

[Geoff B.]

Good evening,

I am super stoked to hear that.

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great weekend!

Geoff B.

[Author]

Posts