0,00 USD

No products in the cart.

Saturday, February 27, 2021
0,00 USD

No products in the cart.

The Events Calendar Text is TOO BIG

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

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.

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;
}

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?

Cheryl
Cherylhttps://www.caffeinejournal.com
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.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Hueman Free Theme CSS Tweaks

Zip is using the Hueman free them currently. Here are a few CSS changes he made for styling the author box, links, and tags.

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.
Share via
Liked it? Follow us on social media!
Thanks for sharing!
If you found this post worth sharing, consider following us on social media (if you don't already).
And if you have something you would like to share, consider submitting a post. Find out more here.
Send this to a friend