|
Amy
|
October 18, 2016 at 9:34 am
The calendar works fine on desktop. But when I view the calendar on a mobile or tablet, the events do not show up in the vertical view but they show up in the horizontal view.
Event Espresso – 4.9.13.p and an LG G3 and Iphone 6 using both chrome and opera. All we see is a slightly offcolor box where the event should be. Happens with and without a featured image.
Happens when the theme is changed to 2016.
site location:
http://htx-aandk-wpengine-com.aandk.staging.wpengine.com/
Same problem as:
https://eventespresso.com/topic/calendar-events-dont-show-up-in-vertical-mobile-view-but-shows-up-horizontally/
|
|
Josh
|
October 18, 2016 at 3:04 pm
Hi there,
The events do show up in mobile, but they can be just the little gray boxes so long as the event background color is set to #f7f7f7 in the Calendar settings. Did you want to show a different color for those boxes or something else? If so, you can change the background color in the Event Espresso > Calendar Settings page. The mobile styles actually set the text to not display because there is no room for that text.
-
This reply was modified 7 years, 11 months ago by
 Josh. Reason: clarification about the settings
|
|
Amy
|
October 18, 2016 at 4:03 pm
Thanks Josh. Yes, we need a functional calendar on mobile. I saw somewhere else where you posted a way to show an icon on the calendar on mobile. But it was CSS I believe and would show the same icon for every event ; is that true? But we need some way to distinguish events.
Also, I’m very curious why Lorenzo sees text on his mobile screenshots in the link above to a similar problem. Did he photoshop the screenshots? 🙂
I see that the text won’t work very well because of the size. I just did a ‘Request Desktop Page’ from chrome on the phone and then the calendar looks great although you would have to pinch zoom to see the details. Is there a way to have a zoomable calendar but still retain the mobile menu navigation? This would also solve the problem below.
I noticed that the popup if you long press is cut off on the left for events at the beginning of the week like Sunday. Might be good to put in a change to position those so that the left of the popup isn’t further left than the left of the calendar on mobile (probably same problem on the events on Saturday with the right side of the screen).
|
|
Josh
|
October 18, 2016 at 6:08 pm
But it was CSS I believe and would show the same icon for every event ; is that true?
It would not necessarily have to be the same icon for every event. Each event has its own CSS selector so several different icons can be used to help distinguish between events.
Also, I’m very curious why Lorenzo sees text on his mobile screenshots in the link above to a similar problem. Did he photoshop the screenshots? ????
Of course he didn’t Photoshop them. The iPhone 6s has a screen that has just enough pixels so it’s wider than the breakpoint that applies the CSS to hide the event names.
|
|
Amy
|
October 20, 2016 at 8:24 am
Just kidding about the Photoshop of course.
Iphone 6s doesn’t explain it. It has a 1334-by-750-pixel resolution the same as the Iphone 6. The LG G3 has a much better resolution of 1440 x 2560.
I found the CSS below allows the calendar text to show on mobile in portrait but this should really be done out of the box as mobile is extremely important for a product today obviously. I haven’t found a way to display the thumbnail yet as I just know enough CSS to be dangerous.
@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, #espresso_calendar .fc-button-month, #espresso_calendar .fc-button-agendaDay, #espresso_calendar .fc-button-agendaWeek, #espresso_calendar .fc-button-today {
display: inline;
}
#espresso_calendar .fc-event-title {
display: block;
padding: 0px 0px 0px;
font-size: 8px;
}
Changing CSS for event icons would probably be too cumbersome for our users.
|
|
Josh
|
October 20, 2016 at 10:17 am
Hi there,
May I ask, what is your question?
|
|
Amy
|
October 20, 2016 at 12:34 pm
How do I get the featured image thumbnail to display on mobile?
|
|
Josh
|
October 21, 2016 at 11:20 am
You add the following to your custom stylesheet:
#espresso_calendar .thumb-wrap {
display:block !important
}
|
|
Amy
|
October 27, 2016 at 12:14 pm
Thanks Josh. The CSS below gives a pretty good display on mobile for the calendar and weekly views. The text is tiny but readable on bigger phones or you can pinch zoom. The only thing that doesn’t work very well is that the .fc-event cannot be set to max-height : auto as the pictures will be cut off. It seems like the height of the event does not include the thumbnail picture. Thus the max-height is dependent on the number of lines of event text displayed. This will probably work for us now but it would be nice to get a generalized solution for everyone that worked.
@media only screen and (max-width: 480px) {
#espresso_calendar .fc-event-title {
display: block !important;
padding: 1px 1px 1px 1px !important;
font-size: 50% !important;
max-height: 4.5em !important; /* controls the number of lines of text in event title */
}
}
/* make images show for mobile */
@media only screen and (max-width: 480px) {
#espresso_calendar .thumb-wrap {
display : block !important;
padding-top : 2px !important;
}
}
@media only screen and (max-width: 480px) {
#espresso_calendar .fc-event {
min-height: auto !important;
max-height: 5em !important;
}
}
|
