Support

December 20, 2013 at 12:31 pm

Hi there,

We’re working on getting a fix ready for release. In the meantime you can add this to the bottom of your theme’s custom CSS option to fix the issue on your site:

@media only screen and (max-width: 480px) {

#espresso_calendar .fc-event {
min-height: 4em;
max-height: 4em;
}

}

December 22, 2013 at 11:11 pm

Hi,

Due to the restricted size on mobile devices we disable the titles from appearing.

You could use CSS such as

@media only screen and (max-width: 480px) {

#espresso_calendar .fc-event-title {
display: block;
}
}

however, the title will be constrained to the box size still so they will end up looking very strange.

I have an idea that might work, where we disable the link but allow the tooltip to appear still, but will need to run it by the developers as it is outside of my coding knowledge.

• This reply was modified 11 years ago by Dean. Reason: code format edit

December 23, 2013 at 12:54 am

Well, the @media part is a media query, so @media only screen and (max-width: 480px) { basically means it will only target devices with a screen resolution of less than 480 pixels wide, which will cover most phones.

The code Josh supplied will increase the “blobs” size.

December 27, 2013 at 2:12 am

Hi,

Only by reverting to the previous calendar version.

The latest calendar has only proved problematic in a few small cases where CSS has clashed, and we are working on making the CSS more specific to avoid these types of issues.

The calendar has been improved on in a variety of ways so we don’t recommend reverting back but if you still wish to just let me know and I’ll email a copy of the previous version.

December 27, 2013 at 5:16 am

You could try

@media only screen and (max-width: 480px) {
#espresso_calendar .fc-event-title {
display: block;
min-height: 4em;
max-height: 40em;
}
}

However, it will still constrain the width of the calendar to the width of the phone so the boxes will be very tall if there is a long title.

December 30, 2013 at 9:31 am

Hi trt,

You’ll also need to target the parent element. As an aside, you can set max-height to none so even if you have a really long title it will still display all of it. Suggested code change follows:

/* An attempt to fix calendar issue on smartphones */

@media only screen and (max-width: 480px) {
#espresso_calendar .fc-event-title {
min-height: 4em;
max-height: none;
display:block;
}
#espresso_calendar .fc-event {
max-height: none;
}
}

December 30, 2013 at 7:34 pm

Yes, something like this will override the defaults:

@media only screen and (max-width: 540px) {

#espresso_calendar .time-display-block {
visibility: visible;
display: block;
}
}