Support

May 24, 2019 at 10:43 am

Hi,

The gray on gray makes things very difficult to see on the mobile view.

What you can do is add the following to your site’s Additional CSS panel (located on the Appearance > Customize page)

@media only screen and (max-width: 480px) {
 #espresso_calendar .fc-event-container {
  text-align: center;
 }
 #espresso_calendar .fc-event:before {
  font-family: "dashicons";
  font-size: 28px;
  content: "\f348";
 }
}

May 27, 2019 at 7:12 am

Hi there,

This is what I see:

https://monosnap.com/file/OvESqCVCtBqgbWruvh039CCHB8DnyJ

Which is the expected output for the above CSS.

What is it you want to display?

May 28, 2019 at 8:19 am

I can see the timetable on mobiles is now working but it’s showing a big black letter i. Can this circled letter i be changed to a 80% black as its looking too harsh in full black.

You can set the colour to whatever you prefer by adding something like color: grey;, so this section:

#espresso_calendar .fc-event:before {
  font-family: "dashicons";
  font-size: 28px;
  content: "\f348";
 }

Would be something like:

#espresso_calendar .fc-event:before {
  font-family: "dashicons";
  font-size: 28px;
  content: "\f348";
  color: grey;
 }

You can use whichever colour setting you prefer.

It also doesn’t show the price or have an option to book, just a section for leaving a comment.

On the calendar? There are only so many details you can fit onto a small screen within the calendar. The user can click on the above to view the single event page for full details.

Or are you referring to the single event page now? Which I can see currently has no ticket selector and just allows for comments on both desktop and mobile.

Have you set the event not to display the ticket selector in the event settings?