I am developing an email newsletter that works on almost all clients - but for some reasons its not working on gmail. Basically, I want the font-size to be different across devices (bigger fonts on small devices). However, Gmail seems to be completely ignoring the media query at all, and is rendering the desktop version. I tried different approaches - somebody said to create a new style to accomodate the media query, still didn't worked. Below is the css code in the html. Can someone please help me?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>abc</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato');
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

/* Prevent WebKit and Windows mobile changing default text sizes */

table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}

/* Remove spacing between tables in Outlook 2007 and up */

img {
-ms-interpolation-mode: bicubic;
}

/* Allow smoother rendering of resized image in Internet Explorer */

/* iOS BLUE LINKS */

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

/* ANDROID CENTER FIX */

div[style*="margin: 16px 0;"] {
margin: 0 !important;
}

.rollover:hover>img,
* [summary=rollover]:hover>img {
max-height: 0px !important;
}

/* Hides visible image on rollover */

.rollover:hover>div img,
* [summary=rollover]:hover>div img {
max-height: none !important;
}

/* Makes hidden image appear in its place */

.font-mobile {
font-size: 16px;
}

h1 {
font-size: 30px;
font-family: 'Lato', sans-serif;
line-height: 1.5;
color: #004aa5;
font-weight: normal;
}
h1 span{
font-size: 20px;
}

p,
.p {
font-size: 14px;
font-family: 'Lato', sans-serif;
line-height: 1.6;
color: #000000;
}

.findout {
font-size: 18px;
}

.btn {
width: 242px;
}

.TC {
color: #4484df;
font-size: 12px;
}

.footer {
font-size: 12px !important;
color: #afafaf;
}

/* ... */

/*--- Preheader declaration in style block in addition to inline for Outlook */

.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>

<style type="text/css">

@media screen and (max-width:600px) {

p {
font-size: 28px !important;
}

}

</style>
</head>