Hi everyone, I am trying to make the snippet on my Shopify-based site less invasive. Is there a way to hide it on mobile or force a resizing to a smaller button and font? Thanks a million!
Answered
Making the snippet smaller on mobile
Best answer by mathio-tf
Hello
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.
+5Hello
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.
Did the solution above work for you? 
+2mathio wrote:
Hello
To hide the button on mobile you can wrap the whole snippet in a custom parent element and hide it using CSS:
<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>
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
hey
WEBSITE LINK:
https://belindalong.co/concept-to-company-program
CODE:
MOBILE SITE SCREENSHOT:
Life's too short for unnecessary admin. @belindalong.co
+5Hello
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;
}
}
+2Hey @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!
+5Hello
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.
+2Gotchya, thank you! Still a newbie when it comes to using chrome inspect (and coding in general) so apologies for my ignorance 😭appreciate your help!
Life's too short for unnecessary admin. @belindalong.co
1 person likes this
+5No problem. Were you able to customize your snippet using the classname I posted above?
1 person likes this
+2Will take another look at it once I’ve got this moving countries thing sorted ;) will let you know!
+5Hi
.tf-v1-sidetab-button {
top: 10% !important;
}
1 person likes this
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.