Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Mozify Images Do Not Center on Mobile

bennygill

Newbie
Total Posts:  4
Posted: 30 March 2016 08:39 PM

Hello,

I have a problem where after I Mozify my images they do not align center on mobile.

The image I am talking about here is the top “Element Paints” logo heading.

I have attached my code as a html file because it is too large to paste here.

Any ideas what is going wrong?

Note: the code strips out some header and other tags that mozify generated, this is done by my ESP automatically.

File Attachments
code after mozify.html  (File Size: 9KB - Downloads: 169)

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 31 March 2016 03:21 AM
[ # 1 ]

Benny,
It looks like there was a media query causing all tables to become 100% width. This was causing problems with the centering. I created a new class, “expander” and applied it to all of the tables other than the mozify tables. Then I set the style that affected all tables to only affect expander class tables. I also added a few centering styles. This seems to have fixed the issue.

I have included the code here. Please let me know if you have any other questions.

File Attachments
mozify-fix.html  (File Size: 9KB - Downloads: 168)

 

bennygill

Newbie
Total Posts:  4
Posted: 31 March 2016 12:32 PM
[ # 2 ]

Thanks so much for the help!

With just one little tweaks that has worked. I just removed the “expander” class from one of the inner tables (the table for the orange “YES - I will leave a review” button) because it was causing some problems in Outlook.

I have just a few more quirks I was hoping you could help me with?

1) I have

style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" 

set for the same ““YES - I will leave a review” table cell button. But the rounded corners does not show on all inboxes. It doesn’t work on Live, Lotus, and Outlook. Any idea what I can use for those email clients?

2) On the Android 5.1.0 screenshot, the mozify feature put the brand name “Element Paints” onto two lines, instead of one. This is the only email client that it happens on. It is happening for the top mozified image, and the bottom mozified image.

3) After applying your fix the Android Gmail and Gmail App iOS 7 screenshots do not show responsive text anymore. It just looks like small non-responsive text on desktop but viewed on a small screen.

I have uploaded my lasted code here with my other changes.

Any help is much appreciated!

Thanks,
Ben

File Attachments
mozify-fix.html  (File Size: 9KB - Downloads: 195)

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 01 April 2016 04:11 AM
[ # 3 ]

bennygill,
I can answer your questions but I’m afraid that I don’t have any fixes for you. I spent a few hours on this but was unable to find any workarounds.

1) This is because the border radius property is unsupported in these clients. The only fix is to use an image that has rounded corners.
2) I tried to fix this, but I wasn’t able to find a way to make Android 5.1 render the text on one line.
3) To have the email look responsive on these clients, you’ll probably have to switch to fluid hybrid design: https://www.emailonacid.com/blog/article/email-development/a-fluid-hybrid-design-primer
The way you were making the email responsive before (table {width 100%} media query) causes issues with the mozify tables, so these techniques are incompatible.

I hope those answers help!


 

bennygill

Newbie
Total Posts:  4
Posted: 03 April 2016 03:21 PM
[ # 4 ]

Thanks so much for the help!

I decided to start again using your spongy template, but I also ran into the same problem of no responsiveness after mozify. I created a new thread for that so not to confuse things.

Thanks again for all the help!