Skip to main content
Question

Typeform embedded in email not displaying correctly on mobile

  • 15 March 2024
  • 1 reply
  • 58 views

I embedded a code in my email. It displays correctly on desktop but the mobile view is not correct. I know it’s an issue with customer.io as it is not the same experience on Mailchimp.

Is there something I need to fix in the code?

 

Desktop view:

Mobile View:
 

 

 
This is the embed code:
 
<div class="mail-wrapper" style="" lang="und" dir="auto"> <table align="center" class="wrapper" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EBEBEB;background-color:#EBEBEB;width:100%"> <tbody> <tr> <td> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" role="presentation" style="width:640px;" width="640" bgcolor="#EBEBEB" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:640px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0;text-align:center"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div class="" style="margin:0px auto;max-width:640px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:640px;" ><![endif]--> <div class="mj-column-px-640 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"> <tbody> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;word-break:break-word"> <div style="font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:22px;font-weight:normal;line-height:32px;text-align:left;color:#000000">How likely are you to recommend our Fullgap to a friend or colleague?</div> </td> </tr> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;padding-top:0;word-break:break-word"> <div style="font-family:Ubuntu,Helvetica,Arial,sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000">0 -> Not likely at all</div> </td> </tr> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;padding-top:0;word-break:break-word"> <div style="font-family:Ubuntu,Helvetica,Arial,sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000">10 -&gt; Extremely likely</div> </td> </tr> <tr> <td align="left" class="sc-bdfBwQ cIKpxU" style="font-size:0px;padding:10px 25px;word-break:break-word"> <table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu,Helvetica,Arial,sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none"> <tbody><tr style="height:56px"><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=0" style="display:block;color:#000000;text-decoration:none;text-align:center">0</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=1" style="display:block;color:#000000;text-decoration:none;text-align:center">1</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=2" style="display:block;color:#000000;text-decoration:none;text-align:center">2</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=3" style="display:block;color:#000000;text-decoration:none;text-align:center">3</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=4" style="display:block;color:#000000;text-decoration:none;text-align:center">4</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=5" style="display:block;color:#000000;text-decoration:none;text-align:center">5</a></td></tr></tbody></table></td></tr><tr style="height:56px"><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=6" style="display:block;color:#000000;text-decoration:none;text-align:center">6</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=7" style="display:block;color:#000000;text-decoration:none;text-align:center">7</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=8" style="display:block;color:#000000;text-decoration:none;text-align:center">8</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=9" style="display:block;color:#000000;text-decoration:none;text-align:center">9</a></td></tr></tbody></table></td><td align="center" style="padding:4px;width:41px"><table style="width:100%"><tbody><tr><td align="center" valign="middle" style="border:1px #000000 solid;border-radius:3px;background-color:rgba(0, 0, 0, 0.1);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;font-size:16px;height:56px;width:100%"><a href="https://forthefew.typeform.com/FullgapNPS?typeform-medium=embed-email#answers-df4f5084-408f-4e89-adc2-73539ef53b3f=10" style="display:block;color:#000000;text-decoration:none;text-align:center">10</a></td></tr></tbody></table></td></tr> </tbody></table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> <style>#outlook a{padding:0}body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt}img{border:0;height:auto;line-height:100%;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic}p{display:block;margin:13px 0}@media only screen and (min-width:480px){.mj-column-px-640{width:640px !important;max-width:640px}}.moz-text-html .mj-column-px-640{width:640px !important;max-width:640px}.mj-column-px-640{width:100% !important;max-width:640px}/*!sc*/data-styled.g1[id="sc-global-juhJZJ1"]{content:"sc-global-juhJZJ1,"}/*!sc*/.cIKpxU table{border-spacing:0;border-collapse:separate}/*!sc*/data-styled.g3[id="sc-bdfBwQ"]{content:"cIKpxU,"}/*!sc*/</style><link href="https://font.typeform.com/dist/google/ubuntu/index.css" rel="stylesheet" type="text/css"></div>

1 reply

Byron
  • 68 replies
  • March 15, 2024

Hi there,

This is Byron from the support team. I copied the code snippet you provided into the code editor in my workspace and sent a test to my mobile device and I wasn’t able to replicate the display issue you show in your screenshot. Which device and email client were you testing with?

Also, which editor are you using in Customer.io; Drag-and-drop, rich text, or code editor? If you’re using the code editor, there may be a conflict in your HTML/CSS and the HTML/CSS in the Typeform code and I would recommend testing using an empty layout and template to verify there are no conflicts in the code.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings