How to format typeform width on mobile separately to desktop | Community
Skip to main content
Question

How to format typeform width on mobile separately to desktop


Forum|alt.badge.img+1

Hi all,

Hope someone can help. I tried so many different ways of getting what I want but cant and am feeling quite frustrated.

I’m trying to make it so that I can change the width of the embeded Standard typeform on my website anytime on the Share>Design settings.

 

 

However, I want to adjust width in px. The reason it is in % above is because I notice that 100% is the only way that the typeform will properly format on a mobile.

If I were to enter in 1000px which is what I want on a desktop, the typeform would over extend the typeform and break the mobile width. 

 

What I want is to be able to adjust the typeform in Share>Design in px because there may be times that I want to change the width for desktop for the same typeform. I also want to be able to lock the width on the mobile format to 100%.

I don’t know coding so is there a way to add code to the embeded code to target mobile formatting?

style="mobilewidth:100%”

OR 
data-tf-something??

3 replies

Forum|alt.badge.img+1
  • Author
  • Socializer
  • 14 replies
  • January 18, 2024

For context, I have tried:

 

  1. Embed code <center><div data-tf-live="mytypeformcode" style="width:100%"></div><script src="//embed.typeform.com/next/embed.js"></script></center>
  2. Set Share>Design width to 1000px
  3.  


Forum|alt.badge.img+1
  • Author
  • Socializer
  • 14 replies
  • January 18, 2024

UPDATE:

Changing the mobile layout to this works but then the image is only in the top half which I don’t want.

 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14918 replies
  • January 24, 2024

Hi @Insider Apologies for the delay. Do you mind sharing the URL where you have the form embedded so we can see how the code is working on your website? 


Reply