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!
Best answer by mathio
View original
Userlevel 6
+5
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.
Userlevel 7
+5
Hi 
Did the solution above work for you?
Userlevel 5
+2
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:
Userlevel 6
+5
Hello
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;
}
}
Userlevel 5
+2
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!
Userlevel 6
+5
Hello
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.
Userlevel 5
+2
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!
Userlevel 6
+5
No problem. Were you able to customize your snippet using the classname I posted above?
Userlevel 5
+2
Will take another look at it once I’ve got this moving countries thing sorted ;) will let you know!
Userlevel 7
+5
Good luck on the move,
Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.