0,00 USD

No products in the cart.

Monday, April 12, 2021

The Events Calendar Text is TOO BIG

Home » WordPress and Blogging » Snippets » The Events Calendar Text is TOO BIG

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:

the events calendar text is too big

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:

The events calendar text is too big

And, of course if I wanted a different font there I could add font-family: lato; or something like that in the mix.


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;

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

Coffee Image for Email Subscribe
Get Caffeinated!

OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.

Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Notify of
Inline Feedbacks
View all comments

You may also be interested in:

Changing Your Widget Title Colors (and finding the right CSS selector to edit CSS)

Zip is slowly, slothfully, changing the colors for his website. But he finds that he can't change the widget titles in the customizer. Here's how to style widget titles using CSS, including adding background images and custom CSS classes.

Recently Popular

Share this
Send this to a friend