Black dots under events in mobile view

[Jonathan Vogel-Borne]

I have two sites using the events calendar pro. One one of them fmcquaker.org, in the month view on mobile phones, there are dots as shown in the attached file. In the other standrewswellesley.org (screen capture also attached)there are not. Same install, both using Avada theme and the categories plugin.

I tried doing a CSS display none on the TEC CSS code using the “:after: selector, but to no avail

What do you know?

[Jaime Marchwinski]

Hi Jonathan,

Thanks so much for reaching out!

Can you provide me with a link to the page where you are seeing this issue?

In the meantime, I’d recommend playing around with the stylesheets and page templates that you have set up to see if that makes a difference in the display:

https://theeventscalendar.com/knowledgebase/stylesheets-and-page-templates/

Let me know how that goes!

 

Thanks,

Jaime

[Jonathan Vogel-Borne]

Greetings Jaime,

The dots appear in the mobile view of the full calendar. Because this was happening, I set the default mobile view to “list”. So, for the link, use the Chrome browser and then go to the calendar page at:

https://fmcquaker.org/calendar/

Once there, use Chrome’s “inspect” link and then click the “toggle device” icon and select a mobile phone from the drop down menu on the top.

Below is a screen capture, showing the dots which as I see from the inspect indicates that the given day “has events”.

I have tried to find the CSS tag for a “display: none;” but as yet I have not been successful.

Thanks for your help.

[Jonathan Vogel-Borne]

Attached is the screen capture mentioned in my recent reply…

[Jaime Marchwinski]

Hi Jonathan,

Thanks for providing me with that information.  Try adding the following CSS to your WordPress Customizer or theme’s (or child theme’s) stylesheet:
@media only screen and (max-width: 800px) {
h3.entry-title.summary, .tribe-events-calendar .tribe-events-has-events:after {
display:none !important;
}
}

Let me know how that goes!

 

Thanks,

Jaime

[Jonathan Vogel-Borne]

Well…

I had already altered that very line of CSS because the cover photo titles of my events were not showing in list view on mobile. The code that your staff suggested to resolve that very problem looks to have brought on this other situation. Below is the code that is in the custom CSS now”

@media only screen and (max-width: 800px) {
h3.entry-title.summary, .tribe-events-calendar .tribe-events-has-events:after {
display: inline-block !important;
}
}

=======================

The current code says display the code you suggest says don’t display. I can mostly live with the situation as it is. Yet, on another similar site that I manage, https://standrewswellesley.org I don’t have the first or the second problem and no custom CSS to make it different either.

What do you know?

[Jaime Marchwinski]

Hi Jonathan,

Do you have the same page templates and stylesheets under Events Settings < Display for both of your sites?

Does removing the original custom code take away a functionality that you need on your site?

Let me know how else I can assist!

 

Thanks,

Jaime

[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