Event Calendar Desktop Versus Mobile

[Jennifer_Yosowitz]

It seems when event calendar looks good on Desktop, it does not look good on mobile because the fonts are too big and too much detail is displaying. So what is the workaround to customize an extensive event calendar for mobile viewing? If I make the mobile look good, the desktop does not, and vice versa.

[Max]

Hi there, @Jennifer_Yosowitz

Could you please send me a link to the page where your widget is installed? I’ll gladly look into this for you

[Adam_Drake]

Agreed. I have the same issue. I love the look on the website, but mobile is very inefficient. Any adjustments I seem to make doesn’t seem to work to even them out.

[Max]

Hi there, @Adam_Drake and welcome to the Community

Unfortunately, it’s impossible to do this now, but we already have this idea on the Wishlist. Feel free to upvote it here - Mobile display for Monthly schedule style

[Max]

The only workaround we can suggest is to use different layout for the mobile view. To do this, you should replace your widget’s installation code with this script:

<script src="https://static.elfsight.com/platform/platform.js" async></script>
<script>
        (() => {
                const WIDGET_ID = "elfsight-app-793a643b-b8bc-4e14-8200-43430779ada2";
                const PHONE_LAYOUT = "list";
                const PHONE_BREAKPOINT = 600;
                const currentScript = document.currentScript;

                const installWidget = () => {
                        const widget = document.createElement("div");
                        widget.classList.add(WIDGET_ID);

                        if (window.innerWidth < PHONE_BREAKPOINT) {
                                widget.setAttribute("data-elfsight-app-layout", PHONE_LAYOUT);
                        }

                        currentScript.parentNode.appendChild(widget);
                };

                if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', installWidget);
                } else {
                        installWidget();
                }
        })();
</script>

In the 5th line of the code (PHONE_LAYOUT), you should set the layout for the mobile view.

In the 6th line of the code (PHONE_BREAKPOINT), you need to add the screen width of the devices, where this layout will be applied

[Adam_Drake]

I’m not super familiar with HTML or codes, where exactly would I need to put this in? Do I put this in the code that Elfsight provides to include to Wix or where?

[Max]

You just need to replace your widget’s installation code you’ve added to your Wix website with the code from my previous message.

I am not sure how exactly you’ve installed the widget, but the widget’s installation code should be either in the HTML Code element (screenshots 1-2) or in the Custom Code section (screenshots 3-4):

So, you just need to delete the default widget’s installation code from your website and add the code I’ve shared instead.

Please let me know if this clarifies things or if you have any questions left

[Adam_Drake]

When i did that, the calendar on the desktop went blank.

[Max]

Ah, I am sorry about that!

I’ll double-check this solution with the devs. Just one more question to clear things up: the widget disappeared only from the desktop version or from the mobile too?

[Adam_Drake]

I guess I just assumed that you guys having as many widgets as you do and having such an easy to use calendar feature that can easily be put into a website like Wix that you would have an in house fix to make it transfer to mobile properly instead of having to rely on customers to have to be proficient in HTML.

[Adam_Drake]

From both.

Adam Drake
www.instagram.com/the_adam_drake

[Max]

Thank you for the info!

I completely understand your emotions, and I am really sorry that this solution didn’t work right away.

We’ll try our best to resolve this issue to your satisfaction. I’ve forwarded it to the devs and will let you know once I have their response!

[Max]

Hi @Adam_Drake

This solution didn’t work, unfortunately, because of the Wix iframes. To fix it, 2 steps should be completed:

• The widget should be reinstalled, avoiding iframes - Installing Elfsight widget on Wix avoiding iFrame - Elfsight Help Center

• Once the 1st step is done, the devs will adjust the previous script.

If you’re facing difficulties with the reinstallation of the widget, please provide us with the access and our devs will gladly assist

Here is an article explaining how to share access - Providing access to your Wix website - Elfsight Help Center