|
ILEA
|
December 1, 2021 at 9:34 am
Hello, we are running into an issue with the Calendar on mobile devices. When loading the page, reports are that only a spinning cog is shown and nothing ever loads onto the calendar, not even the skinny color lines. Our IT support has attempted to add CSS code to change the width on mobile and display only titles, but neither has helped this issue.
|
|
Tony
|
December 2, 2021 at 6:21 am
Hi there,
The spinning cog means the ajax request the calendar sends to pull in the events is either failing or has an error being thrown on it. CSS wont help here as the events are loaded in the calendar for CSS to display.
I checked on your site and it looks like something has been set up to block admin requests?
If I go to {domain}/wp-admin/admin-ajax.php on your site I get:
403 Error
The request could not be satisifed.
Try again later or contact the website administrator.
Which means the request is being blocked, that link should return just 0.
Can you check with you IT support and have them allow requests through to /wp-admin/admin-ajax.php?
|
|
Tony
|
December 2, 2021 at 6:22 am
Side note, this isn’t a mobile-specific issue as I’m getting the same on desktop.
|
|
ILEA
|
December 3, 2021 at 7:26 am
Good morning, this is the response I received from our IT support:
Thank you, we understand the issue now, but we only allow our internal subnets to access ‘/wp-admin/’. External access to wp-admin is blocked via .htaccess. This is a security measure to ensure our admin dashboard is not exposed to login attempts/attacks from outside our network. Is there any other resolution? Are there other files in wp-admin which need to be granted access to all for EE to work properly?
|
|
Tony
|
December 3, 2021 at 7:30 am
Is there any other resolution?
No.
/wp-admin/admin-ajax.php is the ‘WordPress way’ of allowing plugins to use ajax to pull in data, see here:
https://codex.wordpress.org/AJAX_in_Plugins
They will need to add an exception for that single file as it is not just Event Espresso that uses this file but any plugin using ajax requests in the WP way.
Are there other files in wp-admin which need to be granted access to all for EE to work properly?
No, just the above.
|
|
ILEA
|
December 3, 2021 at 7:40 am
Thank you very much for walking us through this, the IT specialist is going to allow that file through to fix this issue.
|
|
ILEA
|
December 3, 2021 at 7:48 am
It is now fixed and appears to be loading now, though on mobile devices, the calendar is poorly displayed due to size issues. Is there an easy CSS fix that we can add to adjust the display for small screen sizes to avoid the long blocks of color for events?
|
|
Tony
|
December 3, 2021 at 8:57 am
Do you mean the height? If so someone has set some custom CSS to set the elements to have a min hight of 30em:
#espresso_calendar .fc-event {
min-height: 30em!important;
max-height: 30em!important;
}
Remove or reduce that value to prevent that from happening.
|
|
ILEA
|
December 3, 2021 at 9:20 am
Here is the response I received:
We had that code block already included in our css.
We are currently using:
/*Event espresso*/
@media only screen and (max-width: 480px){
#espresso_calendar .fc-event-title,
#espresso_calendar .time-display-block,
#espresso_calendar .thumb-wrap,
.ui-tooltip-content p {
display: block !important;
}
#espresso_calendar .fc-event {
min-height: 30em !important;
max-height: 30em !important;
}
}
/*revert table view*/
@media(max-width: 767px) {
#espresso_calendar table,
#espresso_calendar thead,
#espresso_calendar tbody,
#espresso_calendar th,
#espresso_calendar td,
#espresso_calendar tr {
display: revert;
}
}
But we still have heigh issues on mobile. We want it to look more like ballyholme.com/event-calendar
|
|
Tony
|
December 3, 2021 at 10:15 am
We had that code block already included in our css.
Well, yes and that is what is causing the height issue.
As mentioned above you need to remove:
#espresso_calendar .fc-event {
min-height: 30em !important;
max-height: 30em !important;
}
That’s forcing the min higher of the calendar items to be longer than normal on mobile.
We want it to look more like ballyholme.com/event-calendar
Then remove the block of custom CSS for min-height you have added and that’s how it will display 🙂
|
