How to Fix The Event Calendar Page Width in Kadence Theme

If you are using The Events Calendar plugin on your Kadence Theme-built website, you must have taken note of the events layout container on the Events archive page. The Events Calander extends beyond the page width of your overall site container.

The Events Calendar container appears wider than the Kadence site container.
The Events Calendar container appears wider than the Kadence site container.

In this tutorial, we will show you how you can be able to fix this issue by using a custom code snippet that you will add to your Kadence Theme.

Video Tutorial: How to Fix the Events Calender Page Width in Kadence.

Here is a video tutorial on how you can fix the Event Calendar’s Page width when using Kadence Theme

The Process

Step 1: Go to the Kadence Theme Additional CSS Settings

You must access the Additional CSS section within the Kadence Theme Customiser. To access these,

  • Log into your WordPress admin dashboard.
  • In the WP Admin dashboard, go to AppearanceCustomise to open the theme customiser.
Appearance sub-menu via WP Admin dashboard
Select “Customise”.
  • Inside the Theme Custom Settings, go to Additional CSS.
Additional CSS inside Kadence Theme Settings
Additional CSS inside Kadence Theme Settings

Step 2: Add Code the Code Snippet to Fix Page Width

In this second step, you will copy the Fix Page Width Events Calendar code for the Kadence Theme code snippet from Git Hub and add it to the Additional CSS inside the Theme customiser.

  • Copy the below.
  • Paste the code inside the Additional CSS section.
Paste the code snippet in the Additional CSS section inside the Kadence Customiser section.
Paste the code snippet in the Additional CSS section inside the Kadence Customiser section.

Step 3: Test the Events Page

Return to your Events Page and test whether the page layout is okay.

Fixed Events Calendar page width with Kadence
Fixed Events Calendar page width with Kadence

Conclusion

This tutorial addresses a common issue encountered when using The Events Calendar plugin and Kadence Theme, which manifests when the Events Calendar layout extends beyond the designated page width, causing layout discrepancies.

By following this tutorial, you can fix this issue by adding the code snippet to your Additional CSS section to the Kadence Theme custom settings.

At MRK WP, we offer support for both The Events Calendar plugin and Kadence theme as part of our WordPress Care Plan service. Reach out to us if you need a WordPress Care Plan for your website.