Giters

ThemeMountain / acorn

A responsive email framework based on a golden ratio typography grid.

Home Page:https://docs.thememountain.com/acorn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Email Breaks in Office 365 Exchange

9demnex opened this issue · comments

commented

I am using Acorn Framework and its wonderful! But I am having an issue with Office 365 exchange e-mail client. It renders fine on Outlook.com mail and the other major clients, but for some reason, it's breaking in Office 365 exchange and added an erroneous box outside the container. Please see the screenshot. Any ideas what may be causing that and a solution? Any help is greatly appreciated!

Screenshot:
https://imgur.com/a/8dtpsCx

Here's how it should look:
http://strops.com/clearlycayman/EMAIL-TEMPLATES/20-0059/20-0059-index.html

commented

You have unclosed VML code for the 'Our Big Winners of 2019' HERO bg image (that's the white square). Once that's fixed, you have images wider than their container, which blows all Outlook versions up. There may be other issues with your code, didn't go through it all since this isn't an issue with Acorn per se.

commented

As a rule of thumb, don't use width="400" on an image that sits in a width="200" container. Same for the width="1200" image - use 600.

There are other issues (like unnecessary <tbody> tags and CSS that is not part of Acorn, but this should get you on track...

commented

I must have deleted the closing tag accidentally and didn't think to check the VML code. But that seems to have worked. I will also follow your advice on the image container sizes. An oversight I will be much more aware of. I love the framework and am going to use Pine on my next project. Thank you and I appreciate your help and quick response!