Help Desk

Events Page not showing on Mobile

  • Posts: 2 Topics: 1
    | Permalink

    Our Events-Page leave blank on Mobile Devices. Computer and Tablet Devices seems ok, but on mobile phones visitors become a blank page.

    https://ich-mag-es-bergisch.de/events/

    Any suggestions ?

    Posts: 2358
    | Permalink

    Hi there,

    I’m sorry to hear that you’re having issues with the calendar on mobile devices. I will try to help you get this sorted if I can.

    I was able to fix the issue with the content being hidden by adding the following CSS.

    #tribe-events-content {
      width: 100%;
    }
    

    I’m not sure what’s missing on your site that this needs to be added. The site is loading the various stylesheets for mobile styles.

    I also noticed though, that the month calendar didn’t seem to be displaying in its compact mobile format for the month view. It shows the full event titles instead of just “dots” on days with events.

    If you temporarily switch to the Twenty Seventeen theme and disable all other plugins, do you still see these issues?

    Thanks,
    Sky

    Posts: 2 Topics: 1
    | Permalink

    Hello Sky,

    thanks for your fast response. I have tried your tipps.

    1. Switching to Twenty Seventeen
    Looks OK and Clean.

    2. Switching to Default Enfold Theme
    Same Blank Page

    I added your CSS-Code in Enfold Quick-CSS. No effect.
    In style.css. No effect.

    BUT

    If i deactivate the PRO Version of The Events Calendar, it looks fine.
    You can take a look again. The PRO Version is still deactivated.

    But wheres the difference ?

    Thanks
    Dirk

    Posts: 2358
    | Permalink

    Hi there,

    I took a look, and I’m not sure what the difference is, as there is no width being applied to that element but it is working. If this displays ok with Twenty Seventeen, that means it’s a theme conflict. Unfortunately, we are limited in how much support we can provide for customizations and issues with third party products.

    With Pro active, can you try this variation of the CSS snippet:

    #tribe-events-content {
      width: 100%!important;
    }
    

    Let me know if that works for you.

    Thanks,
    Sky

    Posts: 2 Topics: 1
    | Permalink

    Hey Sky,

    thanks for your response. I added the Snippet in Quick-CSS from Enfold and it seems to work.
    I only miss the navigation links e.g. next event / previous event
    Are they hidden in mobile view ?

    Many thanks
    Dirk

    Posts: 2358
    | Permalink

    Hi again,

    As I mentioned earlier, something seems wrong with the mobile view of your calendar. You can look at our demo site here to see how it should look by default.

    Taking a look at the resources being loaded on your site, I notice that you are using some sort of caching/minification plugin. The mobile styles for our plugins are loaded in a separate stylesheet when it detects mobile screen size. Caching and minifying all of the styles together can unfortunately break things.

    I would see if you have the ability to disable this on a plugin by plugin basis, and if so, prevent the mobile stylesheets from getting added in there.

    Hope this helps!

    Thanks,
    Sky

    Posts: 65
    | Permalink

    Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

    Thanks so much!
    The Events Calendar Support Team

    | Permalink