BugWP logo BugWP
Back to Community
Home / Community / Plugin → The events calendar

Fixing Common Display Issues in The Events Calendar

45 threads Sep 16, 2025 Plugin → The events calendar

Content

Display and layout problems are some of the most common issues users encounter with The Events Calendar plugin. These can range from text overlapping and elements appearing in the wrong place to the entire calendar not being responsive. Based on community support threads, here are the most frequent display problems and how to fix them.

Common Display Issues and Their Solutions

1. Overlapping Text and Elements

This is a very common problem where text or icons overlap other parts of the calendar. This is almost always caused by a CSS conflict between the plugin and your theme or other plugins.

Solution: The most reliable fix is to use custom CSS to adjust the positioning or spacing of the overlapping element. You can add this CSS in your WordPress dashboard under Appearance → Customize → Additional CSS.

Example: If a venue icon is covering the venue name, try this CSS snippet:

.tribe-events-calendar-day__event-venue span.tribe-events-calendar-day__event-venue-title {
    margin-left: 5% !important;
}

2. Calendar Not Responsive (Disappearing Behind Sidebars)

Sometimes, the calendar does not resize properly on smaller screens or laptops, causing it to get cut off or disappear behind a sidebar.

Solution: This often requires using a CSS media query to adjust the calendar's width and margins at specific screen sizes.

Example: The following CSS can help contain the calendar within a specific portion of the page on medium-sized screens:

@media screen and (min-width: 990px) and (max-width: 1800px) {
  .tribe-events-view {
    max-width: 75% !important;
    margin-left: 25% !important;
  }
}

3. Incorrect Font Sizes or Styles

Your theme might be applying its own font styles to calendar elements, making them too large, too small, or the wrong color.

Solution: Use CSS to override the theme's styles and set your own preferred font properties.

Example: To make the event description text larger, use this CSS:

.tribe-events-single-event-description p {
    font-size: 18px !important;
}

4. Hidden or Missing Header/Footer on Event Pages

If your site's normal header or footer is missing on your event pages, it's likely a template conflict.

Solution: First, check the Events Template setting. Go to Events → Settings → Display tab and ensure the Default Events Template is selected. If the issue persists, it may be a deeper conflict with your theme's structure.

General Troubleshooting Steps

If the specific CSS fixes above don't solve your problem, follow these general steps to identify the cause:

  1. Test for Conflicts: The most common cause of display issues is a conflict with your theme or another plugin. To test this, temporarily switch to a default WordPress theme like Twenty Twenty-One and deactivate all other plugins except The Events Calendar. If the problem goes away, reactivate them one by one to find the culprit.
  2. Clear All Caches: Caching can often cause old, broken CSS to be served to your visitors. Clear your browser cache, any caching plugin caches (e.g., WP Rocket, W3 Total Cache), and your server cache (contact your hosting provider if unsure).
  3. Check Theme Settings: Some themes have options for minifying or combining CSS/JavaScript. Disable these options, as they can conflict with the plugin's scripts.

By following these steps, you can diagnose and resolve the majority of visual and layout problems with The Events Calendar. Remember to always add custom CSS and perform tests on a staging site first if possible, and keep backups of your website.

Related Support Threads Support