Question

Typeform embedded in email not displaying correctly on mobile

  • 15 March 2024
  • 1 reply
  • 24 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

Userlevel 2

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