[Plugin: The Events Calendar] width issues !

Hi there heilios. There are a couple of options here: easiest would just be trying out the different templating options available under Settings -> The Events Calendar. If none of those do the trick, it’s possible that a template override of the gridview.php file. Are you familiar with the process of copying over that file to a newly-created ‘events’ folder in your theme directory, then making your modifications there? That way when you next update the plugin, your changes won’t be overwritten.

Let me know if that’s unclear and I’ll do what I can to elaborate.

Yeah it’s probably what you said, cause I have page templates with my theme, and I can choose them on the event calendar admin panel… I don’t really understand what to do to fix the issue… I have copy gridview.php in a new ‘events’ folder in my theme directory, but still not workng.. ??

Are none of your changes from the new gridview.php folder taking at all? It’s just not registering? This wouldn’t give you a new template to select from the dropdown on Settings -> The Events Calendar; it’d just alter the look of the grid view directly.

Still not working as you can see >> https://www.urbanews.fr/agenda/
I Choose Default Event Template

I see. Alright, thanks for confirming. I’ll have to get a dev from our team to chime in as to this, then, as it’s currently a bit outside my area of expertise. We’ll get someone in here sharing their thoughts over the next couple days. Apologies for the inconvenience in the interim.

Hi Heilios, I’m one of the devs developing The Events Calendar plugin. Happily, I found the spot in your theme that is causing the trouble!

The culprit style is in your theme, Heilios. It is line 429 of your theme’s style.css file:
.grid .hentry {width: 300px; padding: 20px 0; border-top: 1px dotted #eee; margin-right: 20px; float: left;}

The width: 300px is what is killing it. One option is to write a more specific style in your own sheet that is loaded after that, something like:
#tribe-events-content .grid .hentry {width: something-else}
and see if that works. Good luck, and enjoy The Events Calendar!

Ok so it works if I kick the 429 line, but causes some issues on my other pages…. ??

On my cat pages like this one : https://www.urbanews.fr/categorie/par-domaine/urbanisme/ usually I can choose between grid or list with the switch at the right top of the page but if I choose grid without line 429 it sux a lot ^^

I tried #tribe-events-content .grid .hentry {width:30px} for exemple but still not working

I don’t understand what is #tribe-events-content ?

Btw Thx for your help we are close to solve the issue ??

Thanks for the follow-up, Hellios. Let me see if Paul has any other thoughts here.

Try this, Heilios (add it to the end of your theme style.css file, or somewhere else):

.grid .tribe-events-event {
    width: 200px;
}

Let me know if that works!

Hey heilios

im rather new to wordpress so some of the guys might know better, but me personally think you should change your template for starters maybe get one with fluid width there are plenty of free templates out there, and even a few drag an drop theme builders, and id also set your event page to one collum, this would be the best solution if you only know a little html like me – hope this helps

Hi all,

I’m actually experiencing the same issue.
I’ve tried many CSS tricks to try to get the calendar width compatible with my theme but it ignores everything and I can’t make it fit my container. I’m using the EC template for the calendar.
I couldn’t find a proper way to create one full width page template with my theme so I’d choose this method.

But it looks quite ugly at the moment..
https://www.greek-paris.com/crise/events/month/

Any ideas how to fix this ?

Guys: have you tried Paul’s suggestion, above?

Still not working for me ?? ??

Alright, Heilios. Thanks for the follow-up. Bummer to hear that doesn’t do the trick. Let me see if one of our other devs can offer up another solution here.

Hellios,

On line 768px of your styles.css file, change the following:

.grid .tribe-events-event {
width: 200px;
}

to

.grid .tribe-events-event {
width: 110px;
}

That should do the trick.

Cheers