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.

 
   
Media Queries - Breaking emails on Android 4.4.4

Adubash

Newbie
Total Posts:  19
Posted: 31 January 2016 11:50 PM

Hey,

I’ve done several emails recently using media queries while in between unresponsive and fluid-hybrid, using templates from emailframe.work, and testing with Silverpop.

All my results look perfect, except for Android 4.4.4 results which turn out completely broken: https://www.emailonacid.com/app/acidtest/display/summary/Wd7eUmSFQhtGCpGBR6lXIIQQvQ7RmHgP2Dr7e8f5FOE0g/shared

I’ve sent the same email to several people with Android phones (Samsung A5 and Samsung Galaxy S6s) and they’ve come back with the email displaying as the desktop version - no problems.

Can anyone work out where I’m going wrong? (Sorry, using local images)

Many thanks,

Arianne

File Attachments
Header-footer-template.html  (File Size: 18KB - Downloads: 232)

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 01 February 2016 02:54 AM
[ # 1 ]

Abudash,
I think the problem may be the three images in the middle, “100% organic, Delicious recipes, no airfreight”. These are each in a TD that is set to become 300px width on smaller screens. If you want these to be responsive and stack, you need to change the TD to TH and apply align=“left” to all of them. You may also want to save the images at 300px width, as they will look pixelated if you blow them up from 200 to 300px width.

Let me know if you need more help!


 

Adubash

Newbie
Total Posts:  19
Posted: 07 February 2016 08:11 PM
[ # 2 ]

Thanks Geoff! That has made them stack - They’re not intended to enlarge when on a mobile, I put them in a 300px td because at 200px they automatically align left? I’m sure you’d know a better way around that.

That section looks great but the whole email still appears broken: https://drive.google.com/file/d/0B1cNymWREVvnV1NWWWNZdnJTTUE/view
Do I need to apply TH to anything that stacks?

Many thanks smile

Arianne


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 February 2016 03:52 AM
[ # 3 ]

Arianne,
The main problem I see in your current code is that the three TDs with class=“productpad” are set to become 300px wide on mobile, but they are not set to stack. They are all align=“center”. This is causing the whole email to look blown out and not fit in the screen. You will want to change those to TH instead of TD and apply align=“left” to them so that they stack on mobile devices.

Let me know if you have any other questions!


 

Adubash

Newbie
Total Posts:  19
Posted: 10 February 2016 12:40 AM
[ # 4 ]

Thanks Geoff - Sorry it’s a bit farcical - I’ve done your suggestion, and it’s been successful but now the remaining boxes are blowing it out:
https://drive.google.com/file/d/0B1cNymWREVvnRU0xSXdSVGJEeVE/view?usp=sharing

Would you mind explaining how <th> forces stacking where <td> doesn’t?  Is there a way that I can do this with tds that I’ve missed? I don’t want to continuously badger you for solutions, as helpful as you are. smile

Thanks,

Arianne


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 10 February 2016 06:58 AM
[ # 5 ]

Arianne,
I’m not sure “how” the TH thing works. It may just be a bug in their code. Here is a blog about it:
https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design

Yes, you can apply this fix to any TD. You can also change all of your TDs into tables with align=“left” instead. Either of these fixes should work in Android 4.4.

I hope that helps, let me know if you have any other questions!


 

Adubash

Newbie
Total Posts:  19
Posted: 11 February 2016 11:56 PM
[ # 6 ]

Hi Geoff,

Sorry for the delayed reply - That’s all been so incredibly helpful, thank you. It’s all looking great (‘not broken’) now. :]

Thanks again,

Arianne