Pop up on mobile devices

If you really want to fix this, you have to do a few more things:

1. fc-header-title (which displays the month and year) has to be moved for screen widths smaller than 760px. Otherwise in android devices it will skew the content.
2. Best spot is above the calendar content. unfortunately this is laid out with tables and there is no floating possible. we have to use absolute positioning to get around that.
3. For screen heights below 480px (small iPhone) the height of the calendar event pop-up can be set to 300px. But for larger phones let the height be auto. It does not make sense to make the user scroll if the event fits on the screen.
4. Avoid overwriting plugin code because if you update the plugin, your changes will be lost. Use a child theme or if you have a template that allows for custom CSS code, add it there.

The code below fixes all the issues i was able to find:

/*  Calendar Fix
-------------------------------------------------------------- */
div.simplemodal-container[style] {
    width: 80%  !important;
    height: auto  !important;
    max-width: 600px !important;
    overflow: auto !important;
}
/*
*/
@media only screen and (max-height:480px) {
    #aec-modal-container .aec-content {
        height: 300px !important;
    }
}
@media only screen and (max-width:780px) {
    #aec-container {
        padding-top: 40px;
    }
   .fc-header-title {
        left: 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }
}
/*  End Calendar
-------------------------------------------------------------- */

Cheers,
Marcello, https://www.mmdbiz.com