How to disable Typeform on mobile? | Community
Skip to main content
Answered

How to disable Typeform on mobile?

  • February 9, 2023
  • 3 replies
  • 228 views
P

I have a Typeform embedded on a Wordpress site and there’s no way to hide it on mobile. I tried wrapping the code in a:

 

<div class="hide-on-mobile">

      <typeform code>

<div>

 

with this CSS:

@media only screen and (max-width: 767px) { .hide-on-mobile { display: none !important; } }

 

But no success. So I tried:

<script>
  function hideTypeformOnMobile() {
    if (window.innerWidth <= 767) {
      var typeform = document.querySelector('#typeform');
      typeform.style.display = 'none';
    }
  }

  window.addEventListener('load', hideTypeformOnMobile);
  window.addEventListener('resize', hideTypeformOnMobile);
</script>

<div id="typeform">
  <!-- Your typeform code goes here -->
</div>

And nothing, still shows.

 

Anyone can help me?

 

Thanks in advance,

Best answer by Pablolo

Ok, I just solved it. 

 

The thing is, it was generating a new button and div class named “tf-v1-popover-button” so I just did this:

 

<style>
  @media (max-width: 767px) {
    .tf-v1-popover {
      display: none !important;
    }
    .tf-v1-popover-button {
      display: none !important;
    }
  }
</style>

<div id="typeform">
  <div data-tf-popover="zQBcbA" data-tf-custom-icon="https://images.typeform.com/images/YMmQCxPHjCcm" data-tf-opacity="100" data-tf-iframe-props="title=Not searching for music for a video [ENG]" data-tf-chat data-tf-transitive-search-params data-tf-button-color="#FBCE37" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>
</div>

 

View original

    3 replies

    J
    Forum|alt.badge.img+5
    • jeremielp
    • Community Wizard
    • 127 replies
    • February 9, 2023

    Try to put your script after your markup, and also call immediately, not only with an eventlistener

    <div id="typeform">
  <!-- Your typeform code goes here -->
</div>
<script>
  function hideTypeformOnMobile() {
    if (window.innerWidth <= 767) {
      var typeform = document.querySelector('#typeform');
      typeform.style.display = 'none';
    }
  }

  window.addEventListener('load', hideTypeformOnMobile);
  window.addEventListener('resize', hideTypeformOnMobile);
  hideTypeformOnMobile()
</script>

     

     

    James
    john.desborough
    Grace
    3 people like this
    • James
      James
    • john.desborough
      john.desborough
    • Grace
      Grace
    P
    • Pablolo
    • Author
    • Explorer
    • 2 replies
    • February 10, 2023

    Thank you very much @jeremielp, unfortunately it keeps showing, so it doesn’t work. You can see it here: https://staging2.legismusic.com/background-music-for-youtube-ads/

    (The yellow icon in the bottom right of the page)

     

    Its very strange.

    P
    • Pablolo
    • Author
    • Explorer
    • 2 replies
    • Answer
    • February 10, 2023

    Ok, I just solved it. 

     

    The thing is, it was generating a new button and div class named “tf-v1-popover-button” so I just did this:

     

    <style>
  @media (max-width: 767px) {
    .tf-v1-popover {
      display: none !important;
    }
    .tf-v1-popover-button {
      display: none !important;
    }
  }
</style>

<div id="typeform">
  <div data-tf-popover="zQBcbA" data-tf-custom-icon="https://images.typeform.com/images/YMmQCxPHjCcm" data-tf-opacity="100" data-tf-iframe-props="title=Not searching for music for a video [ENG]" data-tf-chat data-tf-transitive-search-params data-tf-button-color="#FBCE37" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>
</div>

     

    J
    1 person likes this
    • J
      jeremielp

    Reply


    Still need help?

    Don't be shy and ask the community.

    Ask your question here!
    Community T&Cs