Solved

Typeform formatting issue

  • 2 March 2023
  • 3 replies
  • 154 views
L
Rank
Badge +3

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>

 

icon

Best answer by Brian Turcotte 3 March 2023, 02:05

View original

3 replies

Brian Turcotte
Rank
Userlevel 7
Badge +36

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

L
Rank
Badge +3

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
Rank
Userlevel 7
Badge +44

@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

Helping E-commerce brands maximize Lifetime Value & Profits with Klaviyo, CRO & CVO - Get your free Audit - https://link.polarisgrowth.com/free-audit

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.