I've been unsuccessful at getting the media queries on my email to work on Gmail on Android (Gmail app for Gmail email). I've gone through so many of the troubleshooting articles (these were very informative to remind me to remove attribute selectors, etc: https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81 and https://www.campaignmonitor.com/blog/email-marketing/2016/10/gmail-update-googles-rendering-refresh/) but still no luck. Any guidance is greatly appreciated!

Here is my head of the email:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<style type="text/css"><!--
table td{border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
table{border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin:0 auto !important;}
body{margin:0px auto; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: none; -ms-text-size-adjust: 100%; text-size-adjust: none;}
.ExternalClass{width:100%; background-color: #f4f4f4;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
p {Arial, Sans-serif; font-size: 12px;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}

@media screen and (max-width: 580px){
.bodycontainer {width:100% !important;}
.maincontainer {width:100% !important;}
.maincontainer td{width:100% !important;}   
.headercontainer {width:100% !important; float:none !important; align:center !important;}
.headercontainer2 {width:100% !important; float:none !important; align:center !important;}   
.headercontainer td{width:100% !important; padding: 5px !important;}
.headercontainer2 td{width:100% !important; padding: 5px !important; text-align: center !important;}   
.remove {display:none !important;}
.footercontent {padding: 10px !important;}
}

--></style>
</head>