Theme Issue: Mobile display not working

[nbarbuto]

Hi there! We run a site for our non-profit, and just switched back to Event Calendar after some unhappy and un-pretty time using displaying Google Calendar on our site.

We use a theme (Jupiter) that has always had some issues integrating with Event Calendar, but mostly we’re able to keep it smooth. However, we noticed that our mobile display is not working as it should. This is a theme conflict, yes, but if you guys have any tips or solutions that you already know of, it would be extremely helpful. We can’t really use Event Calendar is it doesn’t work on mobile.

[Geoff]

Hi there, Nina! Thanks for getting in touch and welcome to the forums. Sorry you’re some trouble here but hopefully we can help point things in a better direction. 🙂

Is the main issue with appearance of the calendar on small screens? I did see that there appears to be some custom CSS that forces the calendar to be a specific width:

#tribe-events {
width: 920px !important
}

This is forcing the calendar to be extra wide on small screens. You can fix that by removing those lines in the stylesheet that was customized, or try targeting the width in the CSS when the calendar is small:

.tribe-mobile {
/* Your code */
}

You are right though that the core issue is at the theme level. That means that a solution beyond CSS or custom development on the plugin is going to be best solved by the theme author.

Cheers!
Geoff

[nbarbuto]

Thank you so much! That is very likely causing the issue. a question: what file is that css located in? I have not been working with Event Calendar for long, and I get a little confused as to what is located in pro v. regular, and all the different css sheets in those.

Thanks again!

[nbarbuto]

Actually, I just tried adding

.tribe-mobile {
width: 1200px
}

directly into the theme’s custom css (1200 seems to be a good sweet spot). I’m not sure if this is the best possible fix right now, but it’s at least resolved the issue somewhat! Again, thank you. An answer to the above question would still be appreciated, but very relieved to have this working for this weekend. 🙂

[Geoff]

My pleasure! I hope this helps get things back on track a bit. 🙂

You can probably find that right in your theme’s style.css file. However, depending on the theme, the actual styles for used might be store somewhere else. The theme author would be able to provide more guidance there, if needed.

Cheers!
Geoff

[Geoff]

Thanks for following up and confirming the answer–I really appreciate it!

I’ll go ahead and close this thread, but please feel free to hit us up with a new thread if any other questions pop up. We’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts