Answered

Is it possible for the side tab to only display on desktop?

  • 10 February 2022
  • 3 replies
  • 160 views

It’s looking great on desktop but taking up a huge part of the screen on mobile, so we’d like to find an easy way to display on desktop only. Any guidance on this please?

icon

Best answer by mathio 12 February 2022, 21:36

View original

3 replies

Userlevel 7
Badge +5

Hi @DTL Are you referencing an embedded form? If so, you’ll need to write a code that would only display the form on desktop, as we don’t have an option in our embed code for this. 

@mathio might have some sample code for you!

Userlevel 7
Badge +5

Hello @DTL 

If you have inline typeform in your page, you can hide it on small screens. For example this CSS code will hide your form on devices with screen width < 480px.

<div id="my-form">
<!-- your widget embed code here -->
</div>

<style>
@media only screen and (max-width: 480px) {
#my-form {
display : none;
}
}
</style>

Alternatively you could use JavaScript embed and include it in your page conditionally:

<script>
if (window.innerWidth > 480) {
window.tf.createWidget(/* your embed settings */)
}
</script>

 

However typeforms can be displayed on mobile devices too. If you are interested in displaying your typeform on mobile device too, please share your page URL with us and we can have a look at your embedded typeform together.

Badge +5

In fact this is something we're about to do in our community. I've asked the team to hide the side tab feedback form on mobile because it takes too much space and interferes with reading. 

See example attached. I've asked for it to be hidden while on small screens too 👇

 

 

So @DTL we're facing the same issue 😅

Reply