Can HTML email be fixed in gmail, fluid in mobile?

Question

Creating HTML emails, I have the following seemingly insoluble problem:

• Gmail strips out any in the head. You have to use inline styles.
• I want my design to be different on mobile (specifically Android) which I can do with a media query in the head
• But inline styles over-ride anything in the head.

So how can I make a design, for instance, 600px wide in Gmail but 100% wide on Android?

Answer 1

Use this inline css: style='width:100%; max-width: 580px;' Once the screen width drops below 580px, the layout becomes fluid. You can change the values for whatever fits your needs. This way, you don't run into as many cross client issues. Gmail app doesn't support tags btw.

Answer 2

You can try to embed an <style> tag for email clients that do not remove them and override the inline rules with !important. It would look something like this:

@media all {
    width:100% !important;
}

Please let me know if it works...