CSS in mail template doesn't work

Question

I tried to send mail from some simple mail service and it worked perfectly, but in other system, CSS doesn't load and is displayed in mail body. There's something like that:

<style type="text/css">
    @media only screen and (max-width: 480px) {
        body,
......
</style>

and I see on the beginning

@media only screen and (max-width: 480px) {
        body,

The document is quite long, so I don't want to change every single cell attribute to those from CSS. Is there any way to do it without restructuring all code?

@edit: The other system is SysAid, it's a helpdesk system. I'm trying to change default email notification to something better.

Answer 1

Here is the media query support chart.

Are you inlining your CSS? You'll need to do this particularly for Gmail as it doesn't support the <style> tag at all.

Here is a list of CSS inlining tools so you don't have to copy and paste.

Answer 2

Media queries are not well supported in email applications and services. You can reference this excellent chart from Campaign Monitor which will help you code compatible email templates.