Mobile view is very glitchy

[visitkokomo]

My calendar is working and looking fine on desktop, but as soon as you drag it down to mobile size, all of the dates stack and show no information. I cant find any css that should be doing this. It appears to be a theme conflict, any ideas on how to possibly resolve it?

[Sky]

Hi Sherry,

I took a look, and it seems that your theme is overriding table styles on mobile devices. Here is a CSS snippet that will correct the styles on the current monthly view in mobile:


@media (max-width: 900px){
#tribe-events-content table tr {
display: table-row;
}
#tribe-events-content table td {
display: table-cell;
}
}


You can also switch to a different mobile view in Events > Settings > Display : Default Mobile View.

Let me know if that helps or if you have any other questions.

Thanks,
Sky

[visitkokomo]

Hey Sky,

Thanks, this was super helpful. Switching the default style sheet to “Full Styles” Seemed to do the trick for most of it. But im still having issues where my theme is conflicting with all views except the calendar. Are there any PHP snippets you could give me to add to my child theme that ensures the CSS for this plugin loads after my theme css and therefore has a higher priority? Or is there another solution you can recommend?

[Sky]

Sherry,

Unfortunately, the order the stylesheets are loaded is not likely to make much difference in this case. In the CSS I provided above, I had to use IDs to override the specificity.

You may need to track down all of the CSS issues with your theme and add a higher specificity selector or selectors in front of the Event styles.

Out of curiosity, you did try using the “Tribe Events Styles” setting for the Events styles? Did that not help at all?

Thanks,
Sky

[visitkokomo]

Hey Sky,
Yeah i tried switching to Tribe Events Styles as well as Full Styles with no luck. I even tried copying the plugins css files into my child theme, and overriding everything with !important, and this didnt fix anything either :/

Ive attatched a picture of what I am seeing. Is there maybe some css somewhere in the theme files that I am missing?
Is the solution to just go through the entire 3000+ lines of css for the plugin and add more specific selectors to everything?

[Sky]

Sherry,

What settings are you using to get what is shown in that view? I would not recommend going to such extremes to get the calendar to look right. Unfortunately, not all theme developers keep extendability and plugins in mind. The Events Calendar styles usually work quite well with default theme styles. If there is indeed that many issues, it would be easier to find another theme that is not so heavy handed in it’s styling. FWIW, the only issue I saw was with the table styles, and overriding those shouldn’t be that big of a deal.

Let me know if you have any other questions.

Thanks,
Sky

[visitkokomo]

Hey Sky,

I managed to fix the conflicts by using different themes for different parts of our site. I am now having issues with importing from google calendar. The importing itself goes fine but a lot of the listings show up with two addresses when they only show up with one in google calendar, i have attached a pic of this below. I was also wondering, a lot of my listings in google calendar have links in them, but when they are imported they are just plain text, is it possible to make sure these get imported as links?

[Sky]

Sherry,

I’m glad to hear you were able to find a solution to your styling issues!

Could you please create a new post for the importing issue? It helps us track the amount of time spent on different problems. Thank you so much!

Sky

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts