Hi, few weeks before I had raised a question on responsive email design, one of the community chaps told me to find the answer by myself, so I tried and tried. Finally, i found the hybrid method and coded my email in that style. But still, I still have this question in my mind are media queries supported in Gmail app 2019 because all other major email clients support media queries

heres the code for it

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">

</style>

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');

body {
margin: 0 !important;
padding: 0;
background-color:brown;
}
table {
border-spacing: 0;
font-family: Roboto;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
}

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

.bigcolumn{
max-width: 100% !important;
}

}

</style>
</head>
<body style="margin: 0 !important;padding: 0;background-color:brown;" >
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;" >
<div class="webkit" style="max-width:600px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;" >
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table class="outer" align="center" bgcolor="white" style="Margin:0 auto;width:100%;max-width:600px;border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<img src="https://i.imgur.com/C0paJEl.jpg" width="600" alt="" style="width:100%;max-width:600px;border-width:0;" />
</td>
</tr>

<tr>
<td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table width="100%" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td class="inner contents" style="text-align:left;padding-left:40px;padding-right:40px;padding-top:0;padding-bottom:0;" >
<p class="h1" style="font-size:14px;color:#0b446b;Margin-top:35px;Margin-bottom:0px;" >Zone Startups India is all set to launch the 7th edition of Next Big Idea Contest! The 2019 edition will kick off with a launch event being hosted in Mumbai that will see the presence of International government representatives, past edition winners, investors, corporates & potential startups, among other key stakeholders. A keynote and panel are lined up for showcasing global trends and opportunities for Indian Technology highlighting Canada's startup ecosystem and opportunities. </p>

<p class="h1" style="font-size:16px;color:#0da6e0;Margin-top:33px;font-weight:bold;Margin-bottom:0px;" >About Next BIG Idea</p>

<p class="h1" style="font-size:14px;color:#0b446b;Margin-top:12px;Margin-bottom:50px;" >Started out as a joint-initiative of Zone Startups India and Government of Ontario in the year 2013, the Next Big Idea Contest provides an opportunity to tech startups from India, to tap into the most tech-savvy economy i.e, North America. From the pool of applications received, 50 companies will be selected for a market access bootcamp hosted in Mumbai. Post evaluations by Industry Jury Members, Top 10 startups will be selected for a 2-week, all expense paid market access program in Canada.</p>

</td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="two-column" width="100%" style="font-size:0;text-align:center;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column bigcolumn" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;" >
<table width="100%" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td class="inner" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table class="contents" style="width:100%;font-size:14px;text-align:left;border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td width="100%" height="111.706px" bgcolor="#0b446b" style="padding-left:40px;padding-top:0;padding-bottom:0;padding-right:0;" >
<p style="color:white;Margin-top:30px;Margin-bottom:12px;" >Date & Time:</p>
<p style="font-weight:bold;color:#0da6e0;Margin-bottom:12px;Margin-top:0px;" >Friday, 28th June 2019;</p>
<p style="font-weight:bold;color:#0da6e0;Margin-bottom:30px;Margin-top:0px;" >4 pm onward</p>

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column bigcolumn" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;" >
<table width="100%" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td class="inner" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >

<table class="contents" style="width:100%;text-align:left;font-size:14px;border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td width="100%" height="111.706px" bgcolor="#0da6e0" style="padding-left:40px;padding-top:0;padding-bottom:0;padding-right:0;" >

<p style="color:white;Margin-top:30px;Margin-bottom:12px;" >Venue:</p>
<p style="font-weight:bold;color:#0b446b;Margin-bottom:12px;Margin-top:0px;" >Zone Startups India, 18th Floor,</p>
<p style="font-weight:bold;color:#0b446b;Margin-bottom:30px;Margin-top:0px;" >BSE, Dalal Street, Mumbai 400001</p>
</td>
</tr>

</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>

<tr>
<td class="two-column " style="text-align:center;font-size:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column " style="width:100%;max-width:300px;display:inline-block;vertical-align:top;" >
<table width="100%" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td class="inner" style="padding-left:40px;padding-top:0;padding-bottom:0;padding-right:40px;" >
<table class="contents" style="width:100%;text-align:left;font-size:14px;Margin-top:40px;margin-bottom:0px;padding-right:px;border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td style="text-align:left;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<p style="font-weight:500;font-size:14px;color:#0b446b;Margin-top:0px;" >If you want to attend the event to
network with the curated set of
audience, know more about the
contest and explore your opportunity
to soft-land in Canada as a gateway
to North America</p>
</td>
</tr>

<tr>
<td class="text" style="padding-top:10px;padding-bottom:0;padding-right:0;padding-left:0;" >
<div>
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tbody>
<tr>
<td class="padding" align="left" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tbody>
<tr>
<td align="" bgcolor="f7aa99" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<a href="https://litmus.com" target="_blank" class="mobile-button" style="font-size:12px;font-family:Roboto, Arial, sans-serif;font-weight:900;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;display:inline-block;" >Attend the Launch Event</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;" >
<table width="100%" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td class="inner" style="padding-left:40px;padding-right:40px;padding-top:0;padding-bottom:0;" >
<table class="contents" style="width:100%;text-align:left;font-size:14px;Margin-top:40px;margin-bottom:50px;border-spacing:0;font-family:Roboto;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:left;" >
<p style="font-weight:500;font-size:14px;color:#0b446b;Margin-top:0px;" >5 startups will get an opportunity to pitch their startup at the launch event with 1 selected startup getting a direct entry to the final round of evaluation for the bootcamp program in Mumbai. </p>
</td>
</tr>

<tr>
<td class="text" style="padding-top:10px;padding-bottom:0;padding-right:0;padding-left:0;" >
<div>
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;font-family:Roboto;color:#333333;" >
<tbody>
<tr>
<td align="left" class="padding" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container" style="border-spacing:0;font-family:Roboto;color:#333333;">
<tbody>
<tr>
<td align="" bgcolor="f7aa99" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<a href="https://litmus.com" target="_blank" class="mobile-button" style="font-size:12px;font-family:Roboto, Arial, sans-serif;font-weight:900;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;display:inline-block;" >Sign up for On-Spot Pitching</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

</td>
</tr>
</table>

</td>
</tr>

</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>

</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

</div>
</center>
</body>
</html>