The size of mini calendar widget in sidebar

[jmko]

Hi there,
how can I adjust the size of the mini calendar widget in the side bar? Currently it looks strange because it goes all the way to the right edge where as all the other plugins have empty space on the right.
Many thanks
J

[Geoff]

Hey there, Johanna! Welcome to the forums and thanks for getting in touch. We hope you’re enjoying the plugin so far. 🙂

You can change the width of the calendar widget by placing the following in your theme’s CSS (style.css):

.tribe-mini-calendar-wrapper {
width: 100%; /* Adjust to the size the fits */
}

Give that a shot and let me know if it works for you.

Cheers!
Geoff

[jmko]

Hi G,
thanks for a quick response. Unfortunately adding this code to style.css did not change the width of the widget. I also tried with a fixed amount but no change:
What could be issue..?

.tribe-mini-calendar-wrapper {
width:150px;
}

[Geoff]

Are you able to send me a link to the page you’re referring to? I’d like to check it out and see if I can pinpoint it there. Thanks!

[jmko]

This reply is private.

[jmko]

Any news on this?

[Geoff]

Hi there Johanna, sorry for the delay. Our support hours are closed over the weekend but we do make it a point to reply within one business day. 🙂

Thanks for the link, that’s super helpful!  I wasn’t able to pin it down to something that can be fixed in the plugin’s CSS. The CSS in your theme is overriding the table styles for the widget and that the grid layout used by the theme has an issue displaying tables in the sidebar. For example, the .tribe-mini-calendar-wrapper class for the plugin fits the column perfectly (see the shaded area in this screenshot) but the table is allowed to extend past the column.

The CSS for the plugin sets the calendar widget to 100%, which means it will automatically fill 100% of the space it is provided. That leads me to believe that there is something else going on in your theme’s CSS that is overriding that from fitting properly.

Are you comfortable working with your theme’s CSS to pin down where that is happening? Unfortunately, I was unable to o it from my end, but perhaps the person who created the grid layout knows exactly where to look.

Geoff

[Geoff]

Hi there Johanna, it’s been a while so I’m going to go ahead and close this thread. If we can help with anything else, though, please don’t hesitate to create new a new thread and we’ll help you out. 🙂

Cheers!
Geoff

[Author]

Posts