Event calendar shortcode css issues

[Michael]

Hello.
I’ve been trying to add the events calendar to show up on the homepage (on the third of three columns), but it seems to have some serious css issues.
You can see the problem at the screenshot of a demo page at http://www.flickr.com/photos/dimitris_mouroulis/23661177351/in/dateposted-public/ or at
resident.com/calendar-test/
The Events Calendar sidebar widget works just fine. I’d like that look within a page (on the third column – I am using the visual composer plugin). How can this be done without having any css issues?
Thank you

[Josh]

Hey Michael,

Thanks for reaching out to us!

It looks like there may be some additional styles to elements there that can be removed or targeted specifically for the calendar. However, without a link to a live (or staging) version where this is being used it’s going to be difficult to provide any more specific help or code snippets to address these issues on your homepage.

If you are able to provide a link that we can look at it will help us to give you a little more feedback on this one.

Thanks!

[Michael]

Hello again
Here is a link where I’ve placed the shortcode on the 3rd column (as I want it to be placed on the homepage):
http://resident.com/calendar-test/
Thank you in advance

[Josh]

Hey Michael,

Thanks for providing the link! I’ve done some initial review but didn’t see anything stand out in the styling. I also tried to do some changes within the browser using developer tools, however none of the style changes in the console that typically work were taking impact on the site.

There’s possibly something obvious that I’m missing here at the moment. I’ll take a look again later and will follow up with you here.

Thanks!

[Michael]

Thank you Josh.
Maybe it would be helpful if I informed you that the calendar was showing up fine before I added events to it.
I’ll be waiting for your answer.
Thanks again

[Josh]

Hey Michael,

I figured it out! 🙂

Try adding:

pre {
white-space: nowrap;
}

To your theme’s stylesheet and that should address the issues with the layout of the widget.

Let me know if this helps.

Thanks!

[Michael]

Yes that worked. 🙂
Thank you

[Josh]

Hey Michael,

Awesome! I’m glad that worked for you.

I’ll go ahead and close this thread for now. If you have any further questions, please don’t hesitate to open a new one.

Thanks!

[Author]

Posts