Different Mobile View

  • Resolved annabanana74

    (@annabanana74)


    1 month, 2 weeks ago

    Hi! The month calendar view is perfect for desktops, but it is very condensed on a mobile phone. I can only see one letter of the event on the calendar. Is there any way to have the default for mobile ONLY to be a list view while the desktop keeps the monthly calendar view?

    Thanks for your help!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter annabanana74

    (@annabanana74)

    1 month, 2 weeks ago

    Bump. Thanks in advance for your help!

    Plugin Support epsupport1

    (@epsupport1)

    1 month, 2 weeks ago

    Thank you for reaching out.

    We have checked the calendar on your site and it appears to be working correctly on our end. Here is the screenshot for your reference linkCould you please verify this once on your mobile device and let us know if you are still experiencing the issue?

    Looking forward to your confirmation.

    • This reply was modified 1 month, 2 weeks ago by epsupport1.
    Thread Starter annabanana74

    (@annabanana74)

    1 month, 1 week ago

    Hi there. Thank you for your response. I can’t see the entire calendar on your screenshot. Yes, it’s working, but the responsiveness only shows one letter of the event on the calendar. My clients will want to at least see a preview of several letters to know what the event is about before our clients will click on it. I attached two images here: LINK. See how on my calendar on April 27, I can only see one letter – a “W”. On a comparison calendar from another website, see how it shrinks everything down to at least understand what the event is about?. If we can’t shrink down the calendar more, is there a way to change the view for mobile only to event listing, not the calendar.

    Thanks for your help and assistance!

    Anne

    Thread Starter annabanana74

    (@annabanana74)

    1 month ago

    Bump. I would love to hear your thoughts.

    Thread Starter annabanana74

    (@annabanana74)

    1 month ago

    Bump. I’d love your help with the mobile view. Thank you!

    Plugin Support epsupport1

    (@epsupport1)

    3 weeks, 2 days ago

    Hi @annabanana74,

    Thank you for your patience.

    Please navigate to Appearance > Customize > Additional CSS and add the following CSS snippet: 

    @media (max-width: 767px) {
  #ep-events-content-container.ep-narrow #ep_event_calendar a.fc-event {
    padding: 2px 4px !important;
    line-height: 1.15 !important;
    min-height: 1.55em;
  }

  #ep-events-content-container.ep-narrow #ep_event_calendar .fc-event-main,
  #ep-events-content-container.ep-narrow #ep_event_calendar .fc-event-main-frame,
  #ep-events-content-container.ep-narrow #ep_event_calendar .fc-daygrid-event .fc-event-title {
    min-width: 0 !important;
  }

  #ep-events-content-container.ep-narrow #ep_event_calendar .fc-daygrid-event .fc-event-title,
  #ep-events-content-container.ep-narrow #ep_event_calendar .fc-h-event .fc-event-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* show up to 2 lines */
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word;
    line-height: 1.1 !important;
    font-size: 0.4rem !important;
    max-height: 2.2em;
  }
}

    You may adjust the font-size property as necessary.

    If you require any further assistance, feel free to reach out — we’re happy to help.

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.