Skip to main content
Answered

How to disable Typeform on mobile?

  • February 9, 2023
  • 3 replies
  • 249 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:

 

1<div class="hide-on-mobile">
2
3      <typeform code>
4
5<div>

 

with this CSS:

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

 

But no success. So I tried:

1<script>
2  function hideTypeformOnMobile() {
3    if (window.innerWidth <= 767) {
4      var typeform = document.querySelector('#typeform');
5      typeform.style.display = 'none';
6    }
7  }
8
9  window.addEventListener('load', hideTypeformOnMobile);
10  window.addEventListener('resize', hideTypeformOnMobile);
11</script>
12
13<div id="typeform">
14  <!-- Your typeform code goes here -->
15</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:

 

1<style>
2  @media (max-width: 767px) {
3    .tf-v1-popover {
4      display: none !important;
5    }
6    .tf-v1-popover-button {
7      display: none !important;
8    }
9  }
10</style>
11
12<div id="typeform">
13  <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>
14</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

    1<div id="typeform">
    2  <!-- Your typeform code goes here -->
    3</div>
    4<script>
    5  function hideTypeformOnMobile() {
    6    if (window.innerWidth <= 767) {
    7      var typeform = document.querySelector('#typeform');
    8      typeform.style.display = 'none';
    9    }
    10  }
    11
    12  window.addEventListener('load', hideTypeformOnMobile);
    13  window.addEventListener('resize', hideTypeformOnMobile);
    14  hideTypeformOnMobile()
    15</script>

     

     

    James
    john.desborough
    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:

     

    1<style>
    2  @media (max-width: 767px) {
    3    .tf-v1-popover {
    4      display: none !important;
    5    }
    6    .tf-v1-popover-button {
    7      display: none !important;
    8    }
    9  }
    10</style>
    11
    12<div id="typeform">
    13  <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>
    14</div>

     

    J

    Still need help?

    Don't be shy and ask the community.

    Ask your question here!
    Community T&Cs Accessibility statement