Hello @Chengst88!

To hide the button on mobile you can do it using CSS:

<style>
/* hide the button on screens narrower than 600px */
@media only screen and (max-width: 600px) {
  .typeform-sidetab-button {
    display: none;
  }
}
</style>

You can use the same approach to resize the button too. It requires a bit more playing around with the embed code, but the idea is the same - use CSS media query to format the button based on screen size.

I created and example you can use as base for your own code:

https://glitch.com/edit/#!/tf-sidetab-responsive-button?path=index.html

Edit: I updated the solution above to target the button by correct class name.

Hi @Chengst88 Hope you’re doing well!  Did the solution above work for you? 

<div class="my-tf-button">
  <!-- your typeform embed code here -->
</div>

<style>
/* hide the button on screens narrower than 600px */
@media only screen and (max-width: 600px) {
  .my-tf-button {
    display: none;
  }
}
</style>

hey @mathio , just tried to apply this to my Typeform sidebar too but the sidebar is still showing up on the mobile version of my site I want it completely hidden from my mobile site & just have it show on anything iPad and above (min-width: 641px). Site is Squarespace. Screenshots & code below, if you could help me troubleshoot that would be fab TIA! 

WEBSITE LINK: 

https://belindalong.co/concept-to-company-program

CODE: 

MOBILE SITE SCREENSHOT: 

Hello @belinda_long 

sorry, I was wrong about wrapping the code in parent element. You will need to target the button by its own class name typeform-sidetab-button instead.

Like this:

@media only screen and (max-width: 641px) {
  .typeform-sidetab-button {
    display: none;
  }
}

Hey @mathio, thanks for following up, appreciate it! Unfortunately it still doesn’t seem to work for me, even if I add !important afterwards :(

Not sure what I’m doing wrong, gah but will just remove the sidebar until I have more time to troubleshoot – thanks anyway!

Hello @belinda_long we have recently updated class names used in embed. Correct class name should be tf-v1-sidetab-button. You can confirm the class name by inspecting the element in your browser.

Please keep in mind that though it is not very likely to happen we can change those class names without prior notice as this is more a hack rather than a feature we officially support.

Gotchya, thank you! Still a newbie when it comes to using chrome inspect (and coding in general) so apologies for my ignorance appreciate your help! @mathio 

No problem. Were you able to customize your snippet using the classname I posted above?

Will take another look at it once I’ve got this moving countries thing sorted will let you know! @mathio cheers!

Good luck on the move, @belinda_long !!

Hi! Is there a way to offset the button and move it a little up or down by a number of pixels?

Hi @AmbigramPL , you can use the tf-v1-sidetab-button classname, eg like this:

.tf-v1-sidetab-button {
  top: 10% !important;
}