Answered

How to disable Typeform on mobile?

  • 9 February 2023
  • 3 replies
  • 156 views

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,

icon

Best answer by Pablolo 10 February 2023, 11:21

View original

3 replies

Userlevel 5
Badge +5

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>

 

 

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.

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>

 

Reply