Menu icon Foundation
Vertical alignment issue

So I have been playing with Foundation for Emails for a couple/few weeks now and have created some great email templates. However, I have only been testing in the browser until today. When I pushed the inlined emails through our mailing system I noticed a vertical alignment discrepancy in Outlook and exchange OWA. One of my content blocks is not getting vertically aligned to the top and I cannot figure out why.

All other email clients look just fine, it is just outlook and owa that don't seem to be recognizing the vertical alignment to the top. I wanted some help figuring out if this was an issue on my end and if there was anything I could do about it. I have included an image and my markup below to help illustrate the problem.

 

<row>
  <columns small="12" large="6">
    <h4 class="dwwtc-orange text-center">Editor's Choice</h4>
    <h5>Blah Title</h5>
    <p>
      Shoreditch YOLO pork belly hammock umami. Sriracha banh mi keffiyeh kogi, chambray wayfarers portland. Pitchfork poutine lumbersexual bushwick VHS. Tofu portland four dollar toast listicle man bun, intelligentsia aesthetic meh authentic organic poutine single-origin coffee ramps slow-carb. 
    </p>
    <button href="#">Read More</button>
  </columns>
  <columns small="12" large="6">
    <h4 class="dwwtc-green text-center">Q&A</h4>
    <p>
      <strong>Q: What's new in Microsoft 2016?</strong>
    </p>
    <p>
      Answer:<br />
      Blah Blah blah blah woo hoo blah blah yackity shmackity
    </p>
  </columns>
</row>

 

vertical align issue

verticalalignemailinkyOutlook

So I have been playing with Foundation for Emails for a couple/few weeks now and have created some great email templates. However, I have only been testing in the browser until today. When I pushed the inlined emails through our mailing system I noticed a vertical alignment discrepancy in Outlook and exchange OWA. One of my content blocks is not getting vertically aligned to the top and I cannot figure out why.

All other email clients look just fine, it is just outlook and owa that don't seem to be recognizing the vertical alignment to the top. I wanted some help figuring out if this was an issue on my end and if there was anything I could do about it. I have included an image and my markup below to help illustrate the problem.

 

<row>
  <columns small="12" large="6">
    <h4 class="dwwtc-orange text-center">Editor's Choice</h4>
    <h5>Blah Title</h5>
    <p>
      Shoreditch YOLO pork belly hammock umami. Sriracha banh mi keffiyeh kogi, chambray wayfarers portland. Pitchfork poutine lumbersexual bushwick VHS. Tofu portland four dollar toast listicle man bun, intelligentsia aesthetic meh authentic organic poutine single-origin coffee ramps slow-carb. 
    </p>
    <button href="#">Read More</button>
  </columns>
  <columns small="12" large="6">
    <h4 class="dwwtc-green text-center">Q&A</h4>
    <p>
      <strong>Q: What's new in Microsoft 2016?</strong>
    </p>
    <p>
      Answer:<br />
      Blah Blah blah blah woo hoo blah blah yackity shmackity
    </p>
  </columns>
</row>

 

vertical align issue

Corey Schaaf about 3 years ago

I can confirm the issue above. The only thing I added to his code was the container tag so I could get a better visual of it being uneven. 

<container>
  <row>
  <columns small="12" large="6">
    <h4 class="dwwtc-orange text-center">Editor's Choice</h4>
    <h5>Blah Title</h5>
    <p>
      Shoreditch YOLO pork belly hammock umami. Sriracha banh mi keffiyeh kogi, chambray wayfarers portland. Pitchfork poutine lumbersexual bushwick VHS. Tofu portland four dollar toast listicle man bun, intelligentsia aesthetic meh authentic organic poutine single-origin coffee ramps slow-carb. 
    </p>
    <button href="#">Read More</button>
  </columns>
  <columns small="12" large="6">
    <h4 class="dwwtc-green text-center">Q&amp;A</h4>
    <p>
      <strong>Q: What's new in Microsoft 2016?</strong>
    </p>
    <p>
      Answer:<br />
      Blah Blah blah blah woo hoo blah blah yackity shmackity
    </p>
  </columns>
</row>
</container>

 I think the best work around is to open up the compiled file in the Dist folder and add this to the th:

<th valign="top">

Keep in mind you'll have to add this every time you compile to the dist folder.  

Sean Elliot about 3 years ago

Just wanted to confirm this issue. For me, the fix was applying the valign="top" to the column <th> (post inlining).

 

Thanks to the above posters!

Roy Hinkley about 3 years ago

I came here to ask about the same issue. Here is the screenshot from EOA for Outlook 2007. It's the same for Outlook 2010, 2013 and 2016.

This is from a fresh install of Foundation for Email 2.1 with absolutely no additional classes added. The columns look fine on every other platform.

Is this a bug that should be reported in a bug tracker somewhere? I'll admit I'm really kind of clueless about what the proper protocol is to get bugs like this addressed, but I'd like to help if anyone knows the proper channels.

 

edit: Can confirm that adding valign="top" to the enclosing <th> solves the problem.

Uneven columns in Outlook