16

I have created a responsive email template which works in all web clients, all versions of outlook, apple mail, thunderbird, iOS, HTC's 'Mail' app and nearly everything else minus Lotus notes.

Is does not work forthe Gmail app on Android. I am pretty sure this is because gmail strips out all the css in header (which contains the media query) so it to show the standard web version but the window is mobile size, so it shows about 300px half the email. Is there anyway to force it to use the media query? Failing that is there a way to change viewport? What would be the best fall back option?

Thanks!

user1370288
  • 909
  • 3
  • 10
  • 20

2 Answers2

23

There is no workaround using media queries as they can't be inlined. Unfortunately there is no solution for Gmail regarding responsive email (assuming responsive=media queries).

Here are the alternatives:

  1. Fluid layout - A percentage based layout - usually a single column email that is 100%. You can add max-width workarounds to limit its width on desktops. This is 100% supported in all major clients and is the best technique for HTML email in my opinion.
  2. Aligned tables - this is more 'adaptive' than responsive. Works the same as floating divs. HTML's align="left" attribute in a table works more consistently in major email clients, as float has limited support.
  3. Keep to the left - Simply design your email with all the important stuff to the left side. Devices will always show the left most 300 or so pixels, so a split column, text left, image right layout may be appropriate.

You can find several examples of fluid and float/align here.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
0

You can use the technique seen here to force the email to stay at the desktop width on Gmail app. It is not a brilliant solution as everything will be quite small and it is definitely not responsive (quite the opposite).

But at least it will stop your layouts from breaking.

The trick is to add

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

to the widest part of the email

https://css-tricks.com/override-gmail-mobile-optimized-email/

Eoin
  • 1,413
  • 2
  • 17
  • 32