Hello,
I recently added The Events Calendar plugin and I'am having some issues with the Calendar size on my page.... http://www.urbanews.fr/agenda/
How can I fix it ?
The Events Calendar
[resolved] width issues ! (25 posts)
-
heilios
Posted 4 months ago # -
roblagatta
Posted 4 months ago #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.
-
Posted 4 months ago #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.. :(
-
Posted 4 months ago #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.
-
Posted 4 months ago #Still not working as you can see >> http://www.urbanews.fr/agenda/
I Choose Default Event Template -
Posted 3 months ago #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.
-
Paul Hughes
Posted 3 months ago #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! -
Posted 3 months ago #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 : http://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 :D
-
Posted 3 months ago #Thanks for the follow-up, Hellios. Let me see if Paul has any other thoughts here.
-
Posted 3 months ago #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!
-
aboveNbelow
Posted 3 months ago #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
-
cecilaki_LG
Posted 3 months ago #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..
http://www.greek-paris.com/crise/events/month/Any ideas how to fix this ?
-
Posted 3 months ago #Guys: have you tried Paul's suggestion, above?
-
Posted 3 months ago #Still not working for me :( :(
-
Posted 3 months ago #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.
-
Joachim Kudish
Posted 2 months ago #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
-
Posted 2 months ago #Workinnnnnnnnnnnng !!! Greaaaaaaaaaaaaaat Thx man :)
-
Posted 2 months ago #Heck yeah! Awesome to hear that did the trick, heilios. Thanks for confirming. If you'd be so kind as to give us a vote of "Works" and/or a 5-star rating here at the repo, we sure would appreciate it :)
Please let us know if we can do anything else.
-
c0nstruct
Posted 2 months ago #Hi There,
Sorry to reopen this, but I found good use for this solution. The thing is that I am struggling with my event DIV's overflowing the table cells in the grid view. I have tried to add a overflow:hidden which looks good, but breaks the popups when hovering over the event.
I am about to give up but I thought I should give this thread a try. Do you guys have any tips or tricks?
You can see my problem here:
http://ny.bodokajakk.no/kalender/Edit: Here is my relevant CSS
.grid .tribe-events-event { width: 60px; overflow: hidden; text-overflow: ellipsis; }Thanks,
Terje -
erimic
Posted 1 month ago #Hi. I've been looking for a solution to this, so I thank you for this message thread.
Unfortunately, the fix offered:
.grid .tribe-events-event {
width: 200px;
}is not working for my site (which has a completely different theme). The content width adjusts, but not the width of the actual grid. See here: http://www.buckeyekids.com/deadlines/
Any new suggestions?
-
bolide
Posted 1 month ago #This will all be done in CSS. If you control-click the table in Safari (other browsers may use different hot keys) you can look at the CSS
A quick look suggests that on line 210 of your CSS you need to remove width: 250px. If you get rid of this the table fits the page. This might not be a 100% cure but it will get you going in the right direction
Your CSS is at
http://www.buckeyekids.com/wp-content/plugins/the-events-calendar/resources/events.css?ver=3.3.1Nick Froome
-
Posted 1 month ago #Thanks. I'm in the events.css file and do not see width: 250px.
Which setting should I look at? (I'm not a developer in the least.)
-
Posted 1 month ago #Never mind. I found the line. It worked!!! Thanks so much!!!
-
Posted 1 month ago #I finally found the solution to my own version of this problem.
Problem:
When forcing the cell width to prevent uneven columns I need to use overflow:hidden to prevent long event titles from overstepping their boundaries. The overflow:hidden also clips the tooltip, so that was not a good solution.Solution:
Convert the link to a block element and restrict its width and overflow, thus handling this parallell to the tooltip-div, like such:
.grid .tribe-events-event a { width: 60px; display: block; text-overflow: ellipsis; overflow: hidden;} -
Posted 1 month ago #Thanks for sharing your solution, c0nstruct. It will be useful to others who come with the same problem down the road and you've laid it out in a perfect format for that to make sense. Thanks again and please let us know if we can do anything for you down the road.
Reply
You must log in to post.
