How do I make media queries work for Gmail signature?

Question

I am trying to use media queries for a GMail email signature.

The media queries seem to simply not work at all, even when this simple example is copy pasted as is: https://developers.google.com/gmail/design/css#example_2

Litmus is being used to test this, and whether it's desktop or mobile; Android or iOS; the media queries simply have no effect.

I followed the guidelines in the answers here, but no luck.

Is it even possible to use media queries for GMail signatures?

PS: I am setting the signature programmatically using the following:

Please edit your question and include [example] and explain the exact issue you are having. **but no luck.** does not describe the problem — Linda Lawton - DaImTo, Jun 29 '22 at 07:52

score 0 · Answer 1 · answered Jun 29 '22 at 08:52

CSS Media Queries adjust the styling of the html body of an email
The signature is not part of the html body of an email and thus, media queries don't affect it
What you can do is to retrieve the signature programmatically with

var signature = Gmail.Users.Settings.SendAs.get("me", "your email or alias").signature;

In the next step you can add the signature retrieved in this way manually to the html body of your email:

var signature = Gmail.Users.Settings.SendAs.get("me", "your email or alias").signature;

Thus, you will be able to apply Css media Queries to the signature by making it part of the html body.

See the full solution in the related post.

1 Answers1