Hiding an embedded item on mobile

[eshotsinc (Dan)]

I have a LiveChat code embedded in my footer, but I only want it to show up on desktop. When it shows up on mobile it covers too much space. I tried hiding the code for tablet and below but it still shows up. Any ideas?

-Dan

[eshotsinc (Dan)]

Further clarification, its not showing up on my Note 3 but is showing up on my coworkers iPhones…

[AlexN (Alex Nichol)]

Hey @eshotsinc

Can you share your read only link and provide some screen shots of the problem this will really speed things up.

Here are the posting guidelines for this category.

Posting Guidelines for the Design Help Category

Thanks in advance

[eshotsinc (Dan)]

Here is the read only link.

https://preview.webflow.com/preview/eshots?preview=83263fab0cb351a1f03acd1526f9973c

the site is also live at eshots.com. I suggest anyone willing to help visit the site on your iphone to see the issue. I want the “chat now” option to be gone on all but desktop. I made the embed code invisible on the tablet and mobile versions but it still shows up.

-Dan

[AlexN (Alex Nichol)]

Have you tried using the visibility options in the settings panel? Switching them so that the element is only visible on desktop?

[eshotsinc (Dan)]

Yes that was the first thing I tried. Its odd because live chat box does not show up on my Note 3 but shows up on iPhones.

[AlexN (Alex Nichol)]

I just tested this on my G3 and the message box also appears.

It seems that the script you are using in the embed widget generates an iframe wrapped in a div.It appears in the DOM outside of the embed widget.

I would create some custom code to hid the wrapper div on mobile devices. Target the divs ID. Maybe something like this.

<style>
    @media (max-width: 767px) {
            #livechat-compact-container {
                          display: none;
                           }
                       }
</style>

[eshotsinc (Dan)]

Thanks for the feedback Alex, I will have to try that out.