Skip to main content
Solved

Typeform formatting issue


Forum|alt.badge.img+4

Hi,

im trying to embed a basic Typeform into my Layout. After copy and paste, the width is overflowing.

Any idea why this might happen?

 

Thanks,

 

Lukas

 

 

<div class="mail-wrapper">
<table class="wrapper" style="background: #FFFFFF; background-color: #ffffff; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 640px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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="" 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 style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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 style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: 'Helvetica Neue', sans-serif; font-size: 22px; font-weight: normal; line-height: 32px; text-align: left; color: #000000;"><strong>WUNDERSOCKS UMFRAGE</strong></div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 28px; text-align: left; color: #000000;">Welcher der folgenden Gründe war f&uuml;r Sie <br />ausschlaggebend, nicht zu bestellen?</div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: Ubuntu,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1; text-align: left; color: #000000;"><a href="https://ljjgycgr56h.typeform.com/to/VibPp77g?typeform-medium=embed-email#answers-01GTFK20B3D0RVMHSY1CEA2P1Y=01GTFK20B3JZM5V2MY6WPDSSE3" style="font-family: 'Helvetica Neue', sans-serif; color: #0487af; display: block; font-size: 16px; line-height: 18px; text-decoration: none; text-align: left; padding: 10px 20px; border: 1px solid #0487AF; border-radius: 3px; background-color: rgba(4, 135, 175, 0.1);">Versandkosten zu hoch</a></div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: Ubuntu,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1; text-align: left; color: #000000;"><a href="https://ljjgycgr56h.typeform.com/to/VibPp77g?typeform-medium=embed-email#answers-01GTFK20B3D0RVMHSY1CEA2P1Y=01GTFK20B3AVMAK6NR4P9E3W6B" style="font-family: 'Helvetica Neue', sans-serif; color: #0487af; display: block; font-size: 16px; line-height: 18px; text-decoration: none; text-align: left; padding: 10px 20px; border: 1px solid #0487AF; border-radius: 3px; background-color: rgba(4, 135, 175, 0.1);">Preis war zu hoch</a></div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: Ubuntu,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1; text-align: left; color: #000000;"><a href="https://ljjgycgr56h.typeform.com/to/VibPp77g?typeform-medium=embed-email#answers-01GTFK20B3D0RVMHSY1CEA2P1Y=16d5c6b4-f684-487a-8fa5-38498c7a3024" style="font-family: 'Helvetica Neue', sans-serif; color: #0487af; display: block; font-size: 16px; line-height: 18px; text-decoration: none; text-align: left; padding: 10px 20px; border: 1px solid #0487AF; border-radius: 3px; background-color: rgba(4, 135, 175, 0.1);">Produkt war nicht das, was ich suchte</a></div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: Ubuntu,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1; text-align: left; color: #000000;"><a href="https://ljjgycgr56h.typeform.com/to/VibPp77g?typeform-medium=embed-email#answers-01GTFK20B3D0RVMHSY1CEA2P1Y=eeaf0b69-be98-4ee6-abdb-a6ed9f79eb7d" style="font-family: 'Helvetica Neue', sans-serif; color: #0487af; display: block; font-size: 16px; line-height: 18px; text-decoration: none; text-align: left; padding: 10px 20px; border: 1px solid #0487AF; border-radius: 3px; background-color: rgba(4, 135, 175, 0.1);">Es gab Probleme mit der Zahlung</a></div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: Ubuntu,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1; text-align: left; color: #000000;"><a href="https://ljjgycgr56h.typeform.com/to/VibPp77g?typeform-medium=embed-email#answers-01GTFK20B3D0RVMHSY1CEA2P1Y=c9ec8d8b-171d-4d69-824b-1add2c4d94e6" style="font-family: 'Helvetica Neue', sans-serif; color: #0487af; display: block; font-size: 16px; line-height: 18px; text-decoration: none; text-align: left; padding: 10px 20px; border: 1px solid #0487AF; border-radius: 3px; background-color: rgba(4, 135, 175, 0.1);">Es gab technische Probleme</a></div>
</td>
</tr>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: Ubuntu,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1; text-align: left; color: #000000;"><a href="https://ljjgycgr56h.typeform.com/to/VibPp77g?typeform-medium=embed-email#answers-01GTFK20B3D0RVMHSY1CEA2P1Y=other" style="font-family: 'Helvetica Neue', sans-serif; color: #0487af; display: block; font-size: 16px; line-height: 18px; text-decoration: none; text-align: left; padding: 10px 20px; border: 1px solid #0487AF; border-radius: 3px; background-color: rgba(4, 135, 175, 0.1);">Anderes</a></div>
</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><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" 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 style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<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-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="center">
<div style="font-family: Helvetica,Arial; font-size: 12px; font-weight: normal; line-height: 1; text-align: center; color: #000000;">Powered by <a color="#000000" href="https://www.typeform.com" style="color: #000000; text-decoration: none; font-weight: bold;">Typeform</a></div>
</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}.mj-column-per-100{width:100% !important;max-width:100%}}@media only screen and (max-width:640px){.mj-column-px-640{width:auto !important}}/*!sc*/data-styled.g1[id="sc-global-cYWZWD1"]{content:"sc-global-cYWZWD1,"}/*!sc*/</style>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" /></div>

 

Best answer by Brian Turcotte

Hi @lumotion!

 

From a glance I can see a few different things that may be causing this:

 

  1. The outermost table has a width of 100%, but some of the inner tables and divs have fixed widths set in pixels. For example, the following table has a fixed width of 640 pixels:
    <table class="wrapper" style="background: #FFFFFF; background-color: #ffffff; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
      <tbody>
        <tr>
          <td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
            <div style="margin: 0px auto; max-width: 640px;">
              <table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
                ...
              </table>
            </div>
            <!-- [if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
          </td>
        </tr>
      </tbody>
    </table>
    

    If the content inside this table is wider than 640 pixels, it will overflow and cause display issues. To prevent this, the width of the inner tables and divs should also be set to 100% or adjusted using CSS media queries.
     

  2. Some of the elements have large padding and margins that can add to the overall width of the content and cause it to overflow. For example, the following div has a padding of 20 pixels on the top and bottom:
    <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 style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
              ...
            </td>
          </tr>
          ...
        </tbody>
      </table>
    </div>
    

    If there are multiple of these elements with large padding and margins, the overall width of the content can become too large and cause overflow issues. To prevent this, the padding and margins of these elements should be reduced or adjusted
     

  3. The code does not use CSS media queries to adjust the layout for different screen sizes. This can cause the content to overflow on smaller screens. For example, the following table has a fixed width of 640 pixels:
    <table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
      <tbody>
        <tr>
          <td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;"><!-- [if mso | IE]><table role
    

 

 

Implementing some of these changes might be challenging development tasks, so feel free to reach out to one of our wonderful Official Klaviyo Partners for more development help!

 

I hope this helps, and thanks for using the Community!

- Brian

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @lumotion!

 

From a glance I can see a few different things that may be causing this:

 

  1. The outermost table has a width of 100%, but some of the inner tables and divs have fixed widths set in pixels. For example, the following table has a fixed width of 640 pixels:
    <table class="wrapper" style="background: #FFFFFF; background-color: #ffffff; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
      <tbody>
        <tr>
          <td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
            <div style="margin: 0px auto; max-width: 640px;">
              <table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
                ...
              </table>
            </div>
            <!-- [if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
          </td>
        </tr>
      </tbody>
    </table>
    

    If the content inside this table is wider than 640 pixels, it will overflow and cause display issues. To prevent this, the width of the inner tables and divs should also be set to 100% or adjusted using CSS media queries.
     

  2. Some of the elements have large padding and margins that can add to the overall width of the content and cause it to overflow. For example, the following div has a padding of 20 pixels on the top and bottom:
    <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 style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td class="" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
              ...
            </td>
          </tr>
          ...
        </tbody>
      </table>
    </div>
    

    If there are multiple of these elements with large padding and margins, the overall width of the content can become too large and cause overflow issues. To prevent this, the padding and margins of these elements should be reduced or adjusted
     

  3. The code does not use CSS media queries to adjust the layout for different screen sizes. This can cause the content to overflow on smaller screens. For example, the following table has a fixed width of 640 pixels:
    <table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
      <tbody>
        <tr>
          <td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;"><!-- [if mso | IE]><table role
    

 

 

Implementing some of these changes might be challenging development tasks, so feel free to reach out to one of our wonderful Official Klaviyo Partners for more development help!

 

I hope this helps, and thanks for using the Community!

- Brian


Forum|alt.badge.img+4
  • Author
  • Contributor III
  • 6 replies
  • March 3, 2023

Hi,

thanks for your reply. Makes all sense and i also tried to manually fix it.

 

I thought i could just copy and paste the Typeform over without making any manual changes.

I just created a default out of the box Typeform.

 

I will take another look

 

Thanks,


Lukas

 


Omar
Partner - Platinum
Forum|alt.badge.img+46
  • Champion & Partner
  • 494 replies
  • March 4, 2023

@lumotion maybe it's also useful to get someone with HTML knowledge to help you with this or maybe try Chatgpt?

 

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner

We help with e-commerce growth through CRO, Klaviyo and CVO


Reply