Tannie,
It looks like there’s a conflict with the id of one of your div tags that is causing it not to appear full screen. You don’t have to deactivate the plugin to edit the files, so go to the editor for the plugin and you’ll need to make a change to the following pages:
the-events-calendar/views/gridview.php
the-events-calendar/views/single.php
the-events-calendar/views/list.php
On each of these pages, change the line that says:
<div id=”content” class=”grid”>
to:
<div id=”calcontent” class=”grid”>
and hit the “Update File” button. The template’s CSS is formatting the <div> with the id of “content” a certain way, but this should fix the width issues.
As far as the last three columns, I know what’s happening, but it’s a little bit harder to fix on your template. What’s happening is the php code is generating the page code for the calendar using a table. The problem lies in the last three columns of the table. The last three <td> tags in every row have a class of “thismonth right” or “othermonth right”.
Here’s what it looks like.
Because there is “right” in that class, the website is pulling the .right formatting from your template’s style.css file which causes the skinny columns. Usually the fix I mentioned in my earlier post will correct this because the plugin’s CSS file would supersede the CSS from your site’s template and make it render properly, but this is not the case with your template. Your template’s CSS file seems to supersede the plugin’s CSS.
Here is what that yours looks like.
I’m not sure why the code is generating the last three columns like this, but I have mentioned it to Shane who is a contributor for the plugin and they are working on the fix. I believe most of these issues should be ironed out in the next release or two depending on what other more important issues show up in the plugin. I’ll keep digging to see if I can come up with a solution for you. Stay tuned.
Sincerely,
Jared