Issue with Crio theme and The Events Calendar plugin

Tagged: 3rd-Party Plugin, Crio

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 8, 2023 at 9:35 am #100412

Misa
Guest

I’m using the Crio theme and have just added the Events Calendar to my site’s main menu. While the calendar does link properly and all the customization settings are working, the calendar does not span across the entire page and seems like it’s limited to the width of some kind of container. Do I need to input .css code to override this? I tried deactivating all my plugins to see if there was a culprit among them, but none of the changes seemed to do anything. I do have some other .css code entered in the css editor but I don’t think it’s impacting anything.

August 8, 2023 at 9:42 am #100476
Brandon C
Keymaster
Hi Misa,

Thanks for your question and thank you for using Crio Pro WordPress theme!

We inspected your page and it looks like there could be some configuration setting forcing your calendar into the sidebar. Before attempting to adjust this with CSS can you check your Events Calendar settings from your admin dashboard Events > Settings > Display and under calendar display make sure the Events template is set to Default Events template.

I also managed to come up with some CSS that should allow you to adjust the calendar width within the events container div. You can add this from the custom CSS editor from the Crio Customize section.
```
@media screen and (min-width: 900px) {
.tribe-common .tribe-common-l-container {
    width: 1200px;
}
}
```
You can adjust the width size to hopefully find your fit on larger screens.

Thanks Misa, we look forward to hearing from you!
August 8, 2023 at 2:46 pm #100478

Misa
Guest

Thanks! I checked my calendar display settings and it’s set to “default styles” (I did not like the look of the skeleton styles) and it’s set to default events template. When I tried to use any of the others as a test, the calendar would look even worse. I’ll try the .css code and check back in if it works. Thank you very much!

August 8, 2023 at 2:52 pm #100510

Brandon C
Keymaster

Thanks Misa,

Sorry you’re still having some issues. I see what you mean when I tried changing the display of the calendar to different options on my end.

Definitely let us know if the CSS method works for you and if not we’ll continue to help you troubleshoot!

Thank you!

August 8, 2023 at 7:18 pm #100523

Misa
Guest

I’m back… So the .css code did work to enlarge the calendar and all appears to be well! I’ve got to toggle the width settings to get it to where I like. Also, I disabled the default next event footers on the single event pages because although they were working on my desktop, when I viewed them on my phone, the links showed up with a black background. Thanks for your help!

August 8, 2023 at 7:24 pm #100532

Brandon C
Keymaster

Hi Misa,

You’re very welcome, I’m happy we were able to help you get this resolved! The mobile background could also be a setting that needs to be adjusted for mobile devices. It looks like the Event Calendar plugin could probably use some maintenance on the developers end, but if you’d like for us to help you hide the black background on mobile devices don’t hesitate to create a new forum topic and we’ll get right on it!

Thanks Misa, please let us know if there’s anything else we can help you with!
Author

Posts