CSS issues with

[James]

Hi,

Just bought the PRO and Community add ons for The Events Calendar, very impressed but having some issues inserting the mini calendar into a page.

Im trying to create a booking page for our village hall, and want to display a calendar with all events in a certain category (village hall) on a separate calendar page so it’s easy to see when the hall is free.

I tried adding the shortcode ‘[tribe_mini_calendar]’ and the calendar showed up with huge and half off the page, definitely some css problems with it that I’m not sure how to go about solving so came here!

I’ve tried changing to the default theme and also turning off all other plugins and the results are the same, the mini calendar widget is fine but the shortcode does not work properly, I really want to use the shortcode to put the calendar in the center of the screen etc.

Screenshots on imgur: http://imgur.com/a/8hQon

Any help would be appreciated!

Thanks,

James

[Brook]

Howdy James,

I just had a look through your website. It’s beautiful! Very nice work.

I was looking through the site to try and find the page where you were testing out the widget. I appreciate the screenshot for sure. But the only way I might be able to help with this theme CSS conflict is if I can use my browser inspector to see the widget, and try out a CSS fix or two. Could you provide a link to a page with the widget?

Cheers!

– Brook

[James]

Hi Brook!

Thanks for the reply, apologies I took a while to reply, I’m in the UK so timezones are a little different.

Sorry I forgot to add a link, the page I am trying to use the shortcode is http://fernham.bbpdev.com/hall-calendar/

and the page where I am using the sidebar widget (which is fine) is http://fernham.bbpdev.com/hall-bookings/

Cheers

James

[Brook]

Howdy James,

Thank you for sharing the link. I do see the issue now. I am not sure why, buy your theme is wrapping the widget in a

 element. It contains this comment next to the 

 :

Removing this wrapper class will break the claendar javascript, please avoid and extend as needed

Which is odd, because removing that wrapper appeared to fixed the calendar. You will probably want to talk to your theme author and see why that element is added, and if it is safe to remove it. Removing it causes the widget to no longer expand and take up more width than is available. It does take up 100% of the content width, but with the 

 removed it is easy to adjust that width as needed.

Does that all make sense? Will that work for you? Please let me know.

Cheers!

- Brook

[James]

Hi,

Think the formatting in your reply went slightly wonky so I didn’t get everything you were saying!

I’m submitting a ticket to Avada about whether the wrapper can be removed, and I’ll check their forums for any issues similar to this.

Can you clarify what you removed to make it display properly please? The formatting in the last message made it a little hard to understand.

Thanks

James

[Brook]

Oops! I was try to mention the HTML < pre > element. But it seems every time I mentioned it it got treated as actual HTML. Your theme is wrapping the widget with a pre tag, which is causing the wideness issue. Good call submitting a ticket to Avada. Please let m e know if I can be of further assistance.

– Brook

[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