Events Calendar Box Padding

[Andrew Toohill]

Using the events calendar version 4.3.5 and events calendar pro version 4.3.4.

Testing the updated plugin on our staging site here:
https://citychurchbloo.staging.wpengine.com/

Here is the default templated view of the events calendar on the site:
https://citychurchbloo.staging.wpengine.com/events-calendar/

front end authentication:
citychurchbloo
citychurch

And… here is the events calendar embedded on a “page” using the new shortcode: [tribe_events]
https://citychurchbloo.staging.wpengine.com/events/

I was initially very excited about being able to use the new shortcode in a page but have been disappointed with the amount of issues that have appeared in this use case. I’m considering not using it any longer unless some of these bugs get worked out.

The issue I’m seeing now is all the extra padding in the individual calendar boxes. Maybe there is an issue that is my fault but since it’s clearly working fine on the default template view page it makes me think something else is going on here. Can you help?

Thanks!

[Geoff]

Hi @atoohill,

First off, I just want to say a hearty “thanks!” for such a well-written question. You provided all the information I needed to look into this and I could appreciate it more.

You are certainly right in that this is a styling conflict. We have a lot more control over how the calendar looks when the the default calendar template is being used. However, once the calendar is embedded in other places, the possibility arises (as it did in this case) where the theme’s styles might override and create differing layouts.

As you can imagine, there’s only so much we can do when it comes down to controlling the styles of other components of the site, like the theme being used. That said, we’re certainly happy to offer guidance and pointers to help clean things up a bit!

In this case, it appears that the theme is applying more padding to the table cells, which is giving you that unwanted extra space. This should get it back to where it matches up with the default calendar:

.type-tribe_events {
padding: 6px 8px !important;
}

Please add that either to your theme’s stylesheet or by navigating to Appearance > Customize > Advanced CSS in the WordPress admin.

Here’s a screenshot of how that looks when I tested it out on your site. I hope it does the trick for you as well but, if not, then it might be worth reaching out to the theme author as well to see if they are aware of any other style classes to focus on.

Cheers!
Geoff

[Andrew Toohill]

This reply is private.

[Geoff]

This reply is private.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts