Disable Script when using mobile

Design help Custom code
1

I’m using Typeform. I’ve added the script within Embed Code and works fine. However I don’t want it displaying when using a mobile device. I selected Display None on the landscape and portrait Mobile but it still displays. Any ideas:

<div data-tf-sidetab="{{wf {&quot;path&quot;:&quot;typeform-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}" data-tf-width="320" data-tf-height="400" data-tf-button-color="#D8195E" data-tf-button-text="GET A QUOTE" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Thank you

2

Window.matchMedia support is good. You can use it to target specific breakpoints. Window.matchMedia() - Web APIs | MDN

1 Like
3

Hi Jeff. Thanks for your swift reply. I’m not too hot on coding. If I add `const mediaQuery = window.matchMedia(‘(min-width: 768px)’)
// Check if the media query is true
if (mediaQuery.matches) {

}`

…it doesn’t work. What needs changing?

4

You would have to add a class to your div and apply a media query to it like so:

<div class="your-class" ... > ... </div>
 <style type="text/css">
      @media screen and (max-width: 479px) {
      
      .your-class {display:none!important;}
      
      }
    </style>
5

Hi Veronica, thanks for your help. Sorry to be a complete dunce but I still can’t get it to work

Here’s the read only site. It’s in Holidays Template Collection Page, at the bottom

https://preview.webflow.com/preview/balkan-escape?utm_medium=preview_link&utm_source=designer&utm_content=balkan-escape&preview=96092f6a21204d4fe699f5d2ac10f07b&pageId=6169869cd09a4e403ed4d3e1&itemId=616a809600d959dec516fbb1&workflow=preview

6

Add the class to the existing div like in the screenshot :slight_smile:

Screenshot 2021-10-20 at 16.27.18
Screenshot 2021-10-20 at 16.27.181572×500 110 KB

7

Sorry Veronica, it’s not working?
https://preview.webflow.com/preview/balkan-escape?utm_medium=preview_link&utm_source=designer&utm_content=balkan-escape&preview=96092f6a21204d4fe699f5d2ac10f07b&pageId=6169869cd09a4e403ed4d3e1&itemId=616a809600d959dec516fbb1&workflow=preview

Thanks again.

8

Hi Veronica, any suggestions on how to get this to work?
Thank you

9

@flem1985 - Based on your topic title I was pointing you to a solution that would only load the Typeform embed script itself when the viewport size was greater than X. Hiding the embed with CSS display:none does not stop the script from loading in the browser.

You could use this example code, placed in your before body custom code area on the page and change the embed to remove the script typeform provided.

<script>
//cache the script in the browser if loaded
$.ajaxSetup({
  cache: true
});
const mediaQuery = window.matchMedia("(min-width: 768px)");
if (mediaQuery.matches) {
  $.getScript("https://embed.typeform.com/next/embed.js");
}
</script>

The embed code where you are placing the form would need to have the <script src="//embed.typeform.com/next/embed.js"></script> removed, leaving only the typeform provided DIV element.

If you need customization help you reach me with a DM and could buy some of my time as I am busy.