Menu icon Foundation
Emergency: Yahoo Mail Update - Responsive Templates Broken

@rafi - I just noticed some templates / automated emails that were tested and sent out through email on acid looked great in their screenshots.  However, today my team noticed that they were getting some strange results in Yahoo Mail for Chrome and Firefox.  

I went back to Email on Acid and noticed that some of the automated emails that hit that inbox layouts were broken. I dropped in a hero.html test and sent it out and sure enough the results are below. Can anyone else verify this? 

Email On Acid Test Results: See the Yahoo Screenshots: 
https://www.emailonacid.com/app/acidtest/display/summary/OCOCRyLaetZkMKGII85IkmsCLkkiGDeUMfxiUrmG0uXHI/shared

I also sent to a personal yahoo account and verified that this is actually happening. 

Yahoo UpdateFoundation for Emails 2.0bugLayout BreakingYAHOO

@rafi - I just noticed some templates / automated emails that were tested and sent out through email on acid looked great in their screenshots.  However, today my team noticed that they were getting some strange results in Yahoo Mail for Chrome and Firefox.  

I went back to Email on Acid and noticed that some of the automated emails that hit that inbox layouts were broken. I dropped in a hero.html test and sent it out and sure enough the results are below. Can anyone else verify this? 

Email On Acid Test Results: See the Yahoo Screenshots: 
https://www.emailonacid.com/app/acidtest/display/summary/OCOCRyLaetZkMKGII85IkmsCLkkiGDeUMfxiUrmG0uXHI/shared

I also sent to a personal yahoo account and verified that this is actually happening. 

Corey Schaaf over 3 years ago

A little background on this bug. When using inspector, if the content (sentences for example) don't fit on one line, it starts to stretch the container.  It's like the tables are ignoring the fixed width if the content is larger than the container. 

There also seems to be issues with extra padding being added on 2 column formats when I tested them. This is true even in one colum formats (extra padding to the right). 

Corey Schaaf over 3 years ago

Just a little bit more digging.  Yahoo doesn't appear to be honoring the min-width of the container either. 

Rafi Benkual over 3 years ago

Hmm, not sure we've run into this before. We are using this CSS on super long inks to force them to wrap:

a.link-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    display: inline-block; 
    max-width: 450px; 
    vertical-align: middle;
  }

Corey Schaaf over 3 years ago

@rafi - did you mean to put the post above? 

Corey Schaaf over 3 years ago

The emails were fine and now Yahoo (as of yesterday) breaks the same emails that went out previously. What I was saying is that if I delete sections of the email to figure out which parts are causing problems, I started with content sections where their are paragraphs of text. I'm not using a really long word without any spaces ... this is actual content. 

Rafi Benkual over 3 years ago

Looks like others are reporting this about the Yahoo mail update: https://litmus.com/community/discussions/5336-yahoo-mail-update-potentially-breaks-hybrid-emails

Looks like the widths need to be changed to min-widths? I wonder if they will revert this soon...

Corey Schaaf over 3 years ago

I'm always reluctant to implement a fix in for something like this.  I think as of right now we're going to leave it as is for a week and then come back to it. 

Corey Schaaf over 3 years ago

UPDATE: THERE IS AN EASIER FIX BELOW. IGNORE THIS COMMENT. 

@rafi the following updates to the _grid.scss file solve the broken layout.  I was following the forum on litmus and for responsive approach min-width's to not work (for hybrids they do).  Instead simply adding a max-width value in addition to the normal width value that already exist should solve this problem. Someone else on litmus also discovered this as well. So I'm fairly confident this should fix the majority of the broken layouts in Yahoo right now.

I've tested this on a few of my emails and the layout is no longer broken.  

As not to introduce any problems to any other clients, I used the @media yahoo approach.  Assuming yahoo fixes this issue, it's pretty easy to just remove @media yahoo references. 

Example:

 

.classname {
    width: 100%;
    @media yahoo{
      max-width:100%;
    }
  }

 

Here is my updated : _grid.scss file: 

 

// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group grid
////

/// Default number of columns for an email.
/// @type Number
$grid-column-count: 12 !default;

/// Default padding for the bottom of a column.
/// @type Number
$column-padding-bottom: $global-padding !default;

//For viewing email in browser
@media only screen {
  html {
    min-height: 100%;
    background: $body-background;
  }
}

table {
  &.body {
    background: $body-background;
    height: 100%;
    width: 100%;
    @media yahoo{
      max-width:100%;
    }
  }
  &.container {
    background: $container-background;
    width: $global-width;
    margin: 0 auto;
    Margin: 0 auto;
    text-align: inherit;
    @media yahoo{
      max-width:$global-width;
    }
  }
  &.row {
    padding: 0;
    width: 100%;
    position: relative;
    @media yahoo{
      max-width:100%;
    }
  }
}

table.container table.row {
  display: table;
}

td.columns,
td.column,
th.columns,
th.column {
  margin: 0 auto;
  Margin: 0 auto;
  padding-left: $global-gutter;
  padding-bottom: $column-padding-bottom;
}

td.columns.last,
td.column.last,
th.columns.last,
th.column.last {
  padding-right: $global-gutter;
}

//makes sure nested tables are 100% width
td.columns,
td.column,
th.columns,
th.column {
  table {
    width: 100%;
    @media yahoo{
      max-width:100%;
    }
  }
}

@for $i from 1 through $grid-column-count {
  td.large-#{$i},
  th.large-#{$i} {
    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
    padding-left: $global-gutter / 2;
    padding-right: $global-gutter / 2;
  }

  td.large-#{$i}.first,
  th.large-#{$i}.first {
    padding-left: $global-gutter;
  }

  td.large-#{$i}.last,
  th.large-#{$i}.last {
    padding-right: $global-gutter;
  }

  //Collapsed logic
  .collapse {
    > tbody > tr > td.large-#{$i},
    > tbody > tr > th.large-#{$i} {
      padding-right: 0;
      padding-left: 0;
      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
      @media yahoo{
        max-width:-zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
      }
    }

    //Gotta give it that extra love for the first and last columns.
    td.large-#{$i}.first,
    th.large-#{$i}.first,
    td.large-#{$i}.last,
    th.large-#{$i}.last {
      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
      @media yahoo{
        max-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
      }
    }
  }
}

@for $i from 1 through $grid-column-count {
  td.large-#{$i} center,
  th.large-#{$i} center {
    min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
    @media yahoo{
      max-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
    }
  }
}

@for $i from 1 through $grid-column-count {
  .body .columns td.large-#{$i},
  .body .column td.large-#{$i},
  .body .columns th.large-#{$i},
  .body .column th.large-#{$i} {
    width: -zf-grid-calc-pct($i, $grid-column-count);
    @media yahoo{
      max-width: -zf-grid-calc-pct($i, $grid-column-count); 
    }
  }
}

@for $i from 1 through ($grid-column-count - 1) {
  td.large-offset-#{$i},
  td.large-offset-#{$i}.first,
  td.large-offset-#{$i}.last,
  th.large-offset-#{$i},
  th.large-offset-#{$i}.first,
  th.large-offset-#{$i}.last {
    //1.5 takes in effect a whole empty cell.
    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
  }
}

td.expander,
th.expander {
  visibility: hidden;
  width: 0;
  padding: 0!important;
  @media yahoo{
    max-width:0!important;
  }
}

updated to the _global.scss

// Foundation for Emails by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group global
////

/// Primary color for interactive components like links and buttons.
/// @type Color
$primary-color: #2199e8 !default;

/// Secondary color, used with components that support the `.secondary` class.
/// @type Color
$secondary-color: #777777 !default;

/// Color to indicate a positive status or action, used with the `.success` class.
/// @type Color
$success-color: #3adb76 !default;

/// Color to indicate a caution status or action, used with the `.warning` class.
/// @type Color
$warning-color: #ffae00 !default;

/// Color to indicate a negative status or action, used with the `.alert` class.
/// @type Color
$alert-color: #ec5840 !default;

/// Color used for light gray UI items within Foundation.
/// @type Color
$light-gray: #f3f3f3 !default;

/// Color used for medium gray UI items within Foundation.
/// @type Color
$medium-gray: #cacaca !default;

/// Color used for dark gray UI items within Foundation.
/// @type Color
$dark-gray: #8a8a8a !default;

/// Color used for black ui items within Foundation
/// @type Color
$black: #0a0a0a !default;

/// Color used for white ui items within Foundation
/// @type Color
$white: #fefefe !default;

/// Color used code.
/// @type Color
$pre-color: #ff6908 !default;

/// Width of the container.
/// @type Number
$global-width: 580px !default;

/// Width of the container on small screens.
/// @type Length
$global-width-small: 95% !default;

/// Gutter for grid elements.
/// @type length
$global-gutter: 16px !default;

/// Body background color.
/// @type Length
$body-background: $light-gray !default;

/// Color for the container background
/// @type Color
$container-background: $white !default;

/// Global font color.
/// @type Color
$global-font-color: $black !default;

/// Global font family.
/// @type Font
$body-font-family: Helvetica, Arial, sans-serif !default;

/// Global padding.
/// @type Number
$global-padding: 16px !default;

/// Global margin. Margin requires a capital 'M' to workin Outlook.com
/// @type Number
$global-margin: 16px !default;

/// Global raidus of radius-corners.
/// @type Number
$global-radius: 3px !default;

/// Global rounded radius of rounded-corners.
/// @type Number
$global-rounded: 500px !default;

/// Global media query to switch from desktop to mobile styles.
/// @type String
$global-breakpoint: $global-width + $global-gutter !default;


.wrapper {
  width: 100%;
  @media  yahoo{
  	max-width: 100%;
  } 
}

 

Rafi Benkual over 3 years ago

Awesome! Looks like Kevin from Litmus detailed the fix here: https://twitter.com/KevinMandeville/status/740168739522523137 Crazy! Hope that Yahoo fixes this soon! 

Rafi Benkual over 3 years ago

For those of you using Foundation for Emails 2, you could add this in a style tag to your default layout or whatever layout you are using.

<head>
  <style>

    @media yahoo { 
      .container {min-width: 580px !important;} 
    }

  </style>
</head>

Rafi Benkual over 3 years ago

@corey - what class are you targeting for your fix? Should be .container, right?

Corey Schaaf over 3 years ago

I tried the min-width route and that does not work, which is why I was using the max-width: 

I updated several locations in my file and not just the container: 

It's my understanding that any reference to a width will be ignored and min-width will be replaced which effects the width of the columns 1-12.  

If you see my file above any reference to @media yahoo is where I added new code. 

UPDATE: Jano Garcia on the litmus thread noticed the same thing I did: 
https://litmus.com/community/discussions/5336-yahoo-mail-update-potentially-breaks-hybrid-emails

Corey Schaaf over 3 years ago

@rafi I reverted my changes just to test to see if could target only the container. 

Using the min-width DID NOT WORK for me. I instead used the max-width approach. I updated the _grid.scss file and around line 25 - 46 i added a media query for yahoo and it worked perfectly for me.  I did a little more digging and it turns out it's not necessary to add a media query for width:100%; references. However, using a max-width when pixel widths are referenced is needed. As it turns out, they are only needed on the container.  I was previously adding them to every class that was calling out a width value.  

If you need me to clarify anything on this let me know. 

table {
  &.body {
    background: $body-background;
    height: 100%;
    width: 100%;
  }
  &.container {
    background: $container-background;
    width: $global-width;
    margin: 0 auto;
    Margin: 0 auto;
    text-align: inherit;
    @media yahoo{
      max-width:$global-width;
    }
  }
  &.row {
    padding: 0;
    width: 100%;
    position: relative;
  }
}

results of a test - layout is perfect on yahoo. 
https://www.emailonacid.com/app/acidtest/display/summary/ioGc4x3B2P33R7KkZhFKOaliMKO6Q1bUrV5Ly9bhXklJv/shared

Ant James over 3 years ago

After editing a portion of our template yesterday I was horrified to see what Yahoo had done to it! Rolled back the changes but then realised that it must be on Yahoo's side. I too had the issue with 'width' being changed to 'min-width'. Yahoo Mail in Internet Explorer seemed the worst culprit.

Though I independently realised that I could set the .container width with a Yahoo media query it didn't fully fix the layout. 

I then came back to examine it this morning (GMT timezone) and yesterday's test looks perfect again in Yahoo Mail across all browsers. Guessing they must have rolled out a hot-fix in the last 12 hours or so?