Do you use The Events Calendar by Modern Tribe and are finding that your calendar text is BIG, at least if you’re using a calendar shortcode? Here’s the snippet I used for getting solving the issue of “The Events Calendar text is too big.”
I’ve spent more time than I want to admit over the last couple of years trying to style things on The Events Calendar by Modern Tribes on my other website. And then they changed it up on me! In December 2019 or January 2020, they launched their “v2” — their new views. And I suffered through initial theme compatibility problems — eventually solved through a combination of their excellent customer support (at least if you have the Pro version, I can’t speak to the free version support on WordPress.org) and styling issues, mixed in with an attempt to convert my calendar to AMP (I’ll write more about that in another post.) Of course, this was before all events were cancelled!
While I think this calendar plugin is the best availble, one minor irritation about The Events Calendar is styling. It has minimal options in the Customizer panel. And, sometimes, the appearance on the front end does unexpected things, depending on your theme.
The Events Calendar Text is Too Big in Desktop Month View
In Elegant Themes’ themes and the Newspaper theme, as well as some other themes, I found that, at least with the month calendar views that I placed via a shortcode, the calendar text in month view was HUGE like this:
I found this hard to look at. The Events Calendar is responsive — if the screen gets smaller or you’re on a mobile device, it changes to a view with a list at the bottom and dots instead of words on the calendar spaces. So, this was only a problem in desktop view. But it was irritating!
How to Fix the Events Calendar Text is Too Big
Fortunately, there’s an easy fix for this. A simple snippet of CSS fixes this issue (for WordPress newbies I’ll be writing another post in the Sloth Makes a Blog series eventually on where to put these snippets.)
Here the snippet:
.tribe-common a, .tribe-common a:active, .tribe-common a:focus, .tribe-common a:hover, .tribe-common a:visited {
font-size: 14px;
}Now, when you go to the calendar page, it looks like:
And, of course if I wanted a different font there I could add font-family: lato; or something like that in the mix.
Update:
I’ve been working with The Events Calendar again lately and it happened AGAIN!
This time, here’s the CSS snippet that cut down that font size:
.tribe-common .tribe-common-h8 {
font-size: 12px;
line-height: 1.38;
font-size: 14px !important;
}
