Support

Home Forums Event Espresso Premium Events not showing up on mobile phone

Events not showing up on mobile phone

Posted: September 9, 2020 at 6:52 pm


mcwfc

September 9, 2020 at 6:52 pm

The events in our calendar(https://mcwfc.us/event-calendar/) show up on a desktop computer but no longer show up on a mobile phone.Any ideas how to fix this?


Tony

  • Support Staff

September 10, 2020 at 5:10 am

Hi there,

Your site’s theme has some styles to force tables to not look like tables on mobile, specifically this code:

/*Table Responsiveness for Mobile*/
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
    display: block;
}

That’s in /wp-content/themes/MesaCountyWorkforce/style.css line 3580-3589

To fix this you should be able to add something like:

@media(max-width: 767px) {
	#espresso_calendar table,
	#espresso_calendar thead,
	#espresso_calendar tbody,
	#espresso_calendar th,
	#espresso_calendar td,
	#espresso_calendar tr {
	    display: revert;
	}
}

To Appearance -> Customize -> Additional CSS.


mcwfc

September 10, 2020 at 7:22 am

Thanks for that Tony! I still have the core issue and that is that the events you see on the desktop computer don’t show up on mobile. If you go to https://mcwfc.us/event-calendar/ on your desktop computer you will see 9 events in September but on mobile you see 2. What is going wrong? Is it a setting that I am unaware of?


Tony

  • Support Staff

September 10, 2020 at 7:41 am

I forgot about an additional change I’d made when checking into this, again the above issue from your themes styles, its completely changing how all tables are displayed which then breaks all of the positioning calculations for the events, change the above to:

@media(max-width: 767px) {
    #espresso_calendar table,
    #espresso_calendar thead,
    #espresso_calendar tbody,
    #espresso_calendar th,
    #espresso_calendar td,
    #espresso_calendar tr {
        display: revert;
    }
    #espresso_calendar td {
        position: initial;
    }   
}

Does that fix it?


mcwfc

September 10, 2020 at 7:58 am

Thanks for sending that so quickly! It looks good in my desktop browser when I make it narrower but on my phone I don’t see any events at all. Look at it on your phone please. Any other ideas?


Tony

  • Support Staff

September 10, 2020 at 8:16 am

I’m already looking at it on my phone and get exactly the same result as when I emulate mobile within Chrome.

The updated CSS above is not in use on your site yet, can you please update the above so I can test it with that.


Tony

  • Support Staff

September 10, 2020 at 8:28 am

This is what I’m getting in Chrome when emulating mobile: https://monosnap.com/file/GEoShqM2Xa7RwUvc1a360b5ZV3vHs7

If I add the CSS I gave you to the page and then force the calendar to re-render, it looks like this: https://monosnap.com/file/i3R4vqpcQuOnLx8KYilzxtfXYaLLZU

I can’t easily test that CSS change and re-render the calendar on mobile but I get exactly the same view as the first screenshot when I load the page, once you’ve updated the custom CSS I can double-check on mobile to confirm.


mcwfc

September 10, 2020 at 8:34 am

I just cleared the cache on our server and now it see the same. When I click on an event it doesn’t take me to see the event. Does it work for you?


mcwfc

September 10, 2020 at 8:36 am

The above note is when holding the phone vertically. If I rotate the phone 90 degrees I see the events and can click on them to go to them. I think I would prefer the events be in a list format on the phone. How do we accomplish that?


Tony

  • Support Staff

September 10, 2020 at 8:49 am

Does it work for you?

Yes, you need to click on the small event bar, not the calendar day itself.

I think I would prefer the events be in a list format on the phone. How do we accomplish that?

We have some details on how you can do this here:

https://eventespresso.com/wiki/events-calendar-add-on/#how_to_calendar_list_on_small_screens


mcwfc

September 10, 2020 at 12:04 pm

I installed that plugin and used the shortcodes. It displays a list but it looks very messed up with lots of extra whitespace. Suggestions?


Tony

  • Support Staff

September 10, 2020 at 12:21 pm

Your shortcode is wrapped in <pre> tags

Switch to text mode and remove the <pre> and </pre> tags from around your shortcode.


mcwfc

September 10, 2020 at 12:32 pm

That was the problem. Thanks for the quick and awesome help to resolve this!


Tony

  • Support Staff

September 10, 2020 at 12:46 pm

You’re most welcome.

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 1 month, 2 weeks ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!