search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Yahoo mobile app - content goes out of container #1001

Open acemichael opened 4 years ago

acemichael commented 4 years ago

The @media yahoo fix is no longer working. Content goes out of the container when viewing a template on both iOS and Android Yahoo mobile app.

What email clients does this happen in? Yahoo mobile app

Screen Shot 2020-04-22 at 2 48 31 PM
acemichael commented 4 years ago

It looks like the TH tags are not staying inside the container.

Screen Shot 2020-04-22 at 3 47 03 PM
DanielRuf commented 4 years ago

Hi @acemichael,

please use our issue template so we can test this. https://github.com/foundation/foundation-emails/blob/develop/.github/ISSUE_TEMPLATE.md

So far I did not see the problem with our projects.

acemichael commented 4 years ago

Hi @DanielRuf

I used the newsletter-2 template for this test and still have the same issue I had on my custom template.

How can we reproduce this bug?

Write out the HTML (or Inky code) that causes the issue.

What did you expect to happen? All content to stay inside their containers

What happened instead? Looks like on Yahoo mobile app the TH are coming out of containers.

What email clients does this happen in? Yahoo mobile app (lastest version)

acemichael commented 4 years ago

Hi @DanielRuf,

Were you able to recreate this issue? I tried all the templates with no changes and still get the same issue.

Thanks!

DanielRuf commented 4 years ago

I think the issue may be caused by the images. Please check if it als happens when you remove them. If this is the case then you have to substract the padding from their width.

acemichael commented 4 years ago

@DanielRuf,

I tried it without an image and have the same issue.

Can you try using my custom template below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
    <title></title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      body,table,tr,td,span,font {
      text-align:left !important;
      }
      body {
      background:#eeeeee !important;
      }
      table a {
      text-decoration:underline !important;
      }
      p a {
      margin:inherit !important;
      margin:inherit !important;
      }
    </style>
    <![endif]-->

  <style type="text/css">
    @media only screen{
        html{
            min-height:100%;
            background:#f3f3f3;
        }
    }
        a[x-apple-data-detectors]{
            color:#20438f !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
        }
        .footer a[x-apple-data-detectors]{
            color:#ffffff !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
            border-bottom-style:solid;
            border-bottom-width:2px;
            border-bottom-color:#028abc;
        }
        body[data-outlook-cycle] a{
            color:#20438f !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
        }
        body[data-outlook-cycle] .footer a{
            color:#ffffff !important;
            border-bottom-style:solid;
            border-bottom-width:2px;
            border-bottom-color:#028abc;
        }
        table.spacer{
            width:100%;
        }
        table.spacer td{
            mso-line-height-rule:exactly;
        }
        img.float-right{
            float:right;
            text-align:right;
        }
        p a{
            margin:inherit;
        }
        .footer a{
            color:#ffffff;
            line-height:140%;
            border-bottom-style:solid;
            border-bottom-width:2px;
            border-bottom-color:#028abc;
        }
        p{
            margin:0;
            margin-bottom:20px;
            color:#0a0a0a;
            font-family:Helvetica,Arial,sans-serif;
            font-size:16px;
            font-weight:normal;
            line-height:150%;
            padding:0;
            text-align:left;
        }
        h2{
            margin:0;
            margin-bottom:15px;
            color:#000000;
            font-family:Helvetica,Arial,sans-serif;
            font-size:26px;
            font-weight:normal;
            line-height:150%;
            padding:0;
            text-align:left;
            word-wrap:normal;
        }
        a{
            margin:inherit;
            color:#20438f;
            font-family:Helvetica,Arial,sans-serif;
            font-weight:normal;
            line-height:150%;
            padding:0;
            text-align:left;
            text-decoration:none;
            border-bottom-style:solid;
            border-bottom-width:2px;
            border-bottom-color:#cfd2aa;
        }
        table.body .pom-letter hr img{
            width:auto !important;
        }
        hr{
            margin-bottom:26px !important;
            overflow:hidden;
        }
@media only screen and (max-width: 750px){
        .small-text-left{
            text-align:left !important;
            font-size:20px !important;
        }
        .pom-small-logo{
            width:150px !important;
        }
        table.menu th.menu-item{
            width:100% !important;
            padding-right:0 !important;
            padding-left:0 !important;
        }
        table.body img{
            width:auto;
            height:auto;
        }
        table.body .container{
            width:100% !important;
        }
        table.body .columns{
            height:auto !important;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            padding-left:15px !important;
            padding-right:15px !important;
        }
        table.body center{
            min-width:0 !important;
        }
        table.body .columns .columns{
            padding-left:0 !important;
            padding-right:0 !important;
        }
        table.body .collapse .columns{
            padding-left:0 !important;
            padding-right:0 !important;
        }
        td.small-12,th.small-12{
            display:inline-block !important;
            width:100% !important;
        }
        .columns td.small-12,.columns th.small-12{
            display:block !important;
            width:100% !important;
        }
        table.menu{
            width:100% !important;
        }
        table.menu td,table.menu th{
            width:auto !important;
            display:inline-block !important;
        }
        table.menu[align=center]{
            width:auto !important;
        }
        table.body .pom-letter img{
            width:100% !important;
            max-width:100% !important;
            height:auto !important;
        }
        .pom-letter{
            direction:ltr !important;
            width:100% !important;
            height:auto !important;
            max-width:100% !important;
            text-align:left !important;
        }
        .body p{
            font-size:17px !important;
            line-height:160% !important;
        }
        .footer.menu[align=center]{
            width:100% !important;
        }
}
@media yahoo {
    .columns{
        max-width:92% !important;
    }
    .collapse .columns{
        max-width:100% !important;
    }
}
    /*
    @tab Body
    @section Links
    @style Links
    */
        .body p a{
            /*@editable*/margin:0;
            /*@editable*/color:#20438f;
            /*@editable*/font-family:Helvetica,Arial,sans-serif;
            /*@editable*/font-weight:normal;
            /*@editable*/line-height:1.3;
            /*@editable*/padding:0;
            /*@editable*/text-align:left;
            /*@editable*/text-decoration:none;
            /*@editable*/border-bottom-style:solid;
            /*@editable*/border-bottom-width:2px;
            /*@editable*/border-bottom-color:#cfd2aa;
        }
</style></head>
  <body style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%; Margin: 0; background: #f3f3f3 !important; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 150%; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
    <table class="body" role="presentation" lang="en" style="margin:0;background:#f3f3f3 !important;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;height:auto;line-height:150%;padding:0;text-align:left;vertical-align:top;width:100%;" xml:lang="en">
      <tbody>
        <tr style="padding:0;text-align:left;vertical-align:top;">
          <td class="float-center" align="center" valign="top" style="-webkit-hyphens:auto;margin:0 auto;border-collapse:collapse !important;color:#0a0a0a;float:none;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:150%;padding:0;text-align:center;vertical-align:top;word-wrap:break-word;">
            <table class="container float-center" role="presentation" style="margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;float:none;padding:0;text-align:center;vertical-align:top;width:750px;">
              <tbody>
                <tr style="padding:0;text-align:left;vertical-align:top;">
                  <td style="-webkit-hyphens:auto;margin:0;border-collapse:collapse !important;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:150%;padding:0;text-align:left;vertical-align:top;word-wrap:break-word;">
                    <table class="row email-header" role="presentation" style="background-color:#20438f;border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%;">
                      <tbody>
                        <tr style="padding:0;text-align:left;vertical-align:top;">
                          <th class="small-12 large-6 columns first" style="margin:0 auto;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:100%;padding:0;padding-bottom:0;padding-left:30px;padding-right:15px;text-align:left;width:345px;">
                            <table role="presentation" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%;">
                              <tbody>
                                <tr style="padding:0;text-align:left;vertical-align:top;">
                                  <th style="margin:0;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:100%;padding:0;text-align:left;">
                                    <a href="https://www.google.com/" style="margin:inherit;color:#20438f;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:150%;padding:0;text-align:left;text-decoration:none;border:none;display:inline-block;">
                                      <img class="pom-small-logo" src="https://via.placeholder.com/400x210.png" alt="placeholder" width="200" border="0" style="-ms-interpolation-mode: bicubic; clear: both; display: block; width: 200px; height: auto; max-width: 100%; outline: none; text-decoration: none;"></a>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </th>
                            <th class="small-12 large-6 columns last" style="margin:0 auto;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:150%;padding:0;padding-bottom:0;padding-left:15px;padding-right:30px;text-align:left;vertical-align:bottom;width:345px;">
                              <table role="presentation" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%;">
                                <tbody>
                                  <tr style="padding:0;text-align:left;vertical-align:top;">
                                    <th style="margin:0;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:150%;padding:0;text-align:left;">
                                      <h1 class="small-text-left" style="margin:0;margin-bottom:15px;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:normal;line-height:100%;padding:0;text-align:right;word-wrap:normal;">The Test Report</h1>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </th>
                          </tr>
                        </tbody>
                      </table>
                      <table role="presentation" class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%;">
                        <tbody>
                          <tr style="padding:0;text-align:left;vertical-align:top;">
                            <td height="40" style="-webkit-hyphens:auto;margin:0;border-collapse:collapse !important;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:40px;font-weight:normal;line-height:40px;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word;"> </td>
                          </tr>
                        </tbody>
                      </table>
                      <table class="row pom-letter" role="presentation" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%;">
                        <tbody>
                          <tr style="padding:0;text-align:left;vertical-align:top;">
                            <th class="small-12 large-12 columns first last" valign="top" style="margin:0 auto;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:150%;padding:0;padding-bottom:16px;padding-left:30px;padding-right:30px;text-align:left;width:750px;">
                              <table role="presentation" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%;">
                                <tbody>
                                  <tr style="padding:0;text-align:left;vertical-align:top;">
                                    <th style="margin:0;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:150%;padding:0;text-align:left;">
                                      <p style="margin:0;margin-bottom:10px;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:1.3;padding:0;text-align:left;" mc:edit="bodytext">Mollit veniam in velit fugiat tempor commodo consequat id aliqua est consectetur consectetur in non cupidatat ut dolore dolor ullamco ullamco adipisicing irure consectetur adipisicing minim occaecat dolor aliqua deserunt sint esse tempor nisi sunt nulla dolore eiusmod irure elit enim occaecat nostrud.</p>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </th>
                          </tr>
                        </tbody>
                      </table>
                      <table role="presentation" class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%;">
                        <tbody>
                          <tr style="padding:0;text-align:left;vertical-align:top;">
                            <td height="20" style="-webkit-hyphens:auto;margin:0;border-collapse:collapse !important;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:20px;font-weight:normal;line-height:20px;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word;"> </td>
                          </tr>
                        </tbody>
                      </table>
                      <center style="min-width:750px;width:100%;">
                        <table role="presentation" class="menu float-center footer" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;background-color:#20438f;width:100%;">
                          <tbody>
                            <tr style="padding:0;text-align:center;vertical-align:top;">
                              <th style="-webkit-hyphens:auto;margin:0;border-collapse:collapse !important;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:150%;padding:10px;text-align:center;vertical-align:top;word-wrap:break-word;">
                                <table align="center" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;">
                                  <tbody>
                                    <tr style="padding:0;text-align:center;vertical-align:top;">
                                      <th class="menu-item" style="margin:0;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:150%;padding:5px;padding-right:5px;text-align:center;">Test Test</th>
                                      <th class="menu-item" style="margin:0;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:150%;padding:5px;padding-right:5px;text-align:center;">123 North Street Avenue</th>
                                      <th class="menu-item" style="margin:0;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:150%;padding:5px;padding-right:5px;text-align:center;">Phone: (123) 345-6789</th>
                                    </tr>
                                  </tbody>
                                </table>
                                <table align="center" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;">
                                  <tbody>
                                    <tr style="padding:0;text-align:center;vertical-align:top;">
                                      <th class="menu-item" style="margin:0;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:normal;line-height:150%;padding:5px;padding-right:5px;text-align:center;">
                                        <a href="*|UNSUB|*" target="_blank" style="margin:0;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:150%;padding:0;text-align:left;text-decoration:none;">Unsubscribe from this list</a>
                                      </th>
                                    </tr>
                                  </tbody>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </center>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
      <table role="presentation" class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%;">
        <tbody>
          <tr style="padding:0;text-align:left;vertical-align:top;">
            <td height="25" style="-webkit-hyphens:auto;margin:0;border-collapse:collapse !important;color:#0a0a0a;font-family:Helvetica, Arial, sans-serif;font-size:25px;font-weight:normal;line-height:25px;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word;"> </td>
          </tr>
        </tbody>
      </table>
      <!-- prevent Gmail on iOS font size manipulation -->
      <div style="display:none;white-space:nowrap;font:15px courier;line-height:0;">                                                           </div>
    </body>
</html>
DanielRuf commented 4 years ago

So far it looks like this is no code generated by our inline task which would add Margin (big M) and I see MS Office tags.

Please try to use our Gulpfile to create the needed inlined code.

Currently I have not much time and no Yahoo account or their apps, you can test at testi.at.

evokelabs commented 3 years ago

@DanielRuf @acemichael

I had a client flag this issue with me today and think I've found a solution.

For whatever reason, the Yahoo App pushes the contents of <th class="small-12 large-12 columns"> out of its container.

Here's an easy set up which illustrates:

<container>
  <row>
    <columns>
      <p>Lorem100</p>
    </columns>
  </row>
</container>

yahoo1

I found this responsive CSS statement to be the issue within the Yahoo app:

table.body .columns {
  height: auto !important;
  box-sizing: border-box;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

If we move this padding rule further down the DOM:

table.body .columns {
  height: auto !important;
  box-sizing: border-box;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

table.body .columns table th,
table.body .columns table th {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

We get this result:

yahoo2

I haven't found any conflicts in Litmus when testing for other platforms.

We can apply this fix by modifying the _media-query.scss file in "node_modules/foundation-emails/scss/components/" from this:

table.body .columns,
  table.body .column {
    height: auto !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: $global-gutter !important;
    padding-right: $global-gutter !important;

To this:

table.body .columns,
table.body .column {
    height: auto !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;

  // Yahoo Mail Fix
  table th, 
  table th
    {
      padding-left: $global-gutter !important;
      padding-right: $global-gutter !important;
    }

Don't forget that the