Calender View OverLapping

[goodlooknout]

My calendar view is overlapping on the page into the right side widget. I was looking for some coding help to help me adjust the view of the calendar so that when I input multiple events it does not overlap. Please scroll to the month of March to see what I am referring to. There are no Feb events. Thanks!

[Jonah]

Hey goodlooknout,

Thanks for going PRO! So here’s what you’ll want to do. Add the following CSS to your theme’s style.css file:

#content #tribe-events-content {
padding: 0;
}

#tribe-events-content .tribe-events-calendar td .tribe-events-event {
width: 46px;
}

#tribe-events-content .tribe-events-calendar hr {
width: auto;
}

We’re really scrunching the calendar in that column. Have you considered making the calendar page full width or at least only use one sidebar?

Let me know whether or not that helps.

Cheers,
Jonah

[goodlooknout]

Yes I have but when I try it with the other page layout template it doesn’t display the headings properly in the calendar view and when you click on an individual event it adds a bunch of categories onto the bottom of the event, it looks horrible. I will set it for you to view in a moment. Take a quick peek and make sure you scroll all the way down when you open an event!!!

[Jonah]

Hey goodlooknout,

That looks pretty good except for all the categories. You can fix that pretty easily by adding this to you theme’s style.css file:

.events-single #sidebar, .events-venue #sidebar {
display: none;
}

That will hide the sidebar on single events and venues.

Does that work?

– Jonah

[goodlooknout]

Thank you so much! I am so happy. It looks a lot better than the first template. One more question you never told me about the header on the calendar view. It gets smashed into the date drop down box. Let me know if you could help with that. It would be greatly appreciated!

http://www.goodlooknout.com/events/

[Jonah]

Great! To clean up the header a bit, try adding this CSS:

.tribe-events-month-nav {
width: 380px;
}

.tribe-events-month-nav .tribe-events-prev-month,
.tribe-events-month-nav .tribe-events-next-month {
float: left;
}

.tribe-events-month-nav .tribe-events-events-dropdown {
float: left;
width: 110px;
}

I hope that helps!

– Jonah

[goodlooknout]

Yes, thank you so much! You guys are great 🙂

[Jonah]

Awesome, I’m glad to hear that helped! I’m going to close this thread out but feel free to open up threads for anything else you need help with.

Cheers,
Jonah

[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