Typeform formatting issue | Klaviyo Community

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>
<!-- tif mso | IE]></td></tr></table><!;endif]--></td>
</tr>
</tbody>
</table>
</div>
<!-- tif 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;"><!-- tif 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>
<!-- tif mso | IE]></td></tr></table><!;endif]--></td>
</tr>
</tbody>
</table>
</div>
<!-- tif mso | IE]></td></tr></table></td></tr></table><!;endif]--></td>
</tr>
</tbody>
</table>
</div>
<!-- tif 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.g1lid="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>

Page 1 / 1

Hi @lumotion!

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

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.

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

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

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

@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

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded