0

If you look at the attached screenshot you will see a design I have created for HTML email. Screen Shot

In all of the tests I run, the following are on one row next to each other.

The logo, "VIP Edition" and the View all Deals button.

In Safari the VIP Edition and the View all Deals fall down a row and the logo centers. Can anyone explain this behaviour to me? I'm struggling to understand why it doesn't happen for the rest of the email, and I can't think how to phrase this question to find my answer.

Eoin
  • 1,413
  • 2
  • 17
  • 32

2 Answers2

0

It would be great to see your code, even if just for that section.

But I have seen this before and I know that when I see this it's usually when I have two aligned tables with an align=center on the parent td.

So for example in your instance, the VIP Edition logo would be in a left aligned table and the View all deals button would be in a right aligned table. Make sure the td housing both of those aligned tables does not have an align attribute set.

Taking that off always fixes the issue for me. If you need to center elements for mobile, set the align=center further up

  • Thanks, I'll give that a try, it sounds like the possible cause. If it doesn't work I'll return with the code. – Eoin Jan 06 '15 at 10:03
  • It won't let me add my code as it's too large [here](https://www.squareballoon.co.uk/downloads/stackoverflow/shd/Daily-67-VIP.html) is a link to it - any assistance you can give me would be amazing. I removed the line on the ` to no avail. To make things worse I now have another template with the same behaviour but only on certain parts. I've tried reducing the space, but that doesn't solve it, so it's not a padding/width issue. – Eoin Jan 07 '15 at 13:03
0

I ended up starting again, I can only assume that it was something to do with the widths of the columns. I found this post which was useful.

In the frameworks section I decided to try a few. The first I tried was Zurb Foundations Ink, because I have used Zurb Foundation in the past. However, their supported clients wasn't comprehensive enough for my liking. They make no mention of the differing browsers, and in my opinion that matters. I've done a lot of testing in the last month. I will test it more thoroughly when I get time, at least they offer a version that works responsively in Gmail which doesn't use media queries.

Wanting something that worked on all platforms out of the box I tried Email on Acid's responsive template. It looks great, and I use Email on Acid to test, so I thought they would have it solved. Their website is full of useful tit-bits. However, their template didn't work in Safari and had the drop down issue I had initially started with. They don't claim it works there, but being as they offer a testing service, I had hoped it would work on all the platforms they use.

Then I moved onto AntWorts solution. That worked in my initial tests, and I found it remarkably easy to adapt to my needs, eventually adding additional columns using their methodology which was clearly explained in one of the templates.

My final template has 1,2,3,4 column grids which work responsively part fluid part adaptive. My advise to people in the future is to start with this boilerplate, I redid my whole template from scratch and it took half the time I have spent trying to troubleshoot a different boilerplate to start with.

Community
  • 1
  • 1
Eoin
  • 1,413
  • 2
  • 17
  • 32