|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
September 10, 2020 at 12:46 pm
You’re most welcome.
|
