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!

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!
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.
Hi Did the solution above work for you?
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 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
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
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!
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!
Good luck on the move,
Hi! Is there a way to offset the button and move it a little up or down by a number of pixels?
Hi
.tf-v1-sidetab-button {
top: 10% !important;
}
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.