I have an email that goes blank in iOS when I use the following:

media only screen and (max-width:414px){}

When I switch it to the following, it shows, but doesn't respond to the media query:

media screen only and (max-width:414px){}

My full code:

<!doctype html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style type="text/css">
/* KMH, 11/3/2015 */
html {
font-size:100%;
overflow-y:scroll;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
body {
margin:0px;
font-family:Verdana, san-serif;
color:#666666;
font-size:14px;
line-height:18px;
}
.ReadMsgBody, .ExternalClass {
width:100%;
display: block !important;
border: 0px!important
}
* {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
.ExternalClass {
width:100%;
}
.ExternalClass * {
line-height: 100%
}
table { 
border-collapse:collapse;
mso-table-lspace:0px;
mso-table-rspace:0px;
margin:0 auto;
table-layout:auto;
}
td {
vertical-align:top;
padding:0px;
border-collapse:collapse;
mso-table-lspace:0px;
mso-table-rspace:0px;
border:0px;
}
img {
display:block;
-ms-interpolation-mode:bicubic; 
border:0px !important;
outline:none !important;
border-style:none !important;
}
p.MsoNormal {
margin:0px !important;
border:0px !important;
overflow:hidden !important;
border-style:hidden !important;
display:block !important;
line-height:0px !important;
}
/* iPhone 6 */
@media only screen and (max-width:480px){
table, td[class="100"]{
width:100% !important;
}
table, tr, td [class="hide"]{
display:none !important;
visibility:hidden !important;
}
table[class="aba_logo"]{
height:65px !important;
width:100% !important;
}
td[class="aba_logo"]{
height:10px !important;
}
td[class="header"]{
width:100% !important;
padding:0px !important;
text-align:center !important;
}
td[class="header"] b{
font-size:24px !important;
line-height:30px !important;
}
table[class="mm-smfooter"] {
width: 100% !important;
}
table[class="mm-smfooter"] td{
font-size:14px !important;
}
td[class="footerlinks"]{
padding:5px 0px 5px 60px !important;
text-align:left !important;
}
}
</STYLE>
</HEAD>
<BODY>
<!-- wrapper -->
<table width="100%" bgcolor="#ecf1f7" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:auto;">
    <tr>
        <td valign="top">
<!-- trouble-viewing -->
            <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="100">
                <tr>
                    <td height="10" style="font-size:0px;line-height:0px;color:#ecf1f7;">{{#1-Header}}</td>
                </tr>
                <tr>
                    <td style="padding:0px 30px 0px 0px; line-height:15px;font-size:13px;text-align:right;"><A title="To view this email as a web page, go here." href="*ViewInBrowserURL" style="color:#404040;text-decoration:none;">Trouble Viewing? <span style="text-decoration:underline;">View online</span>.</A></td>
                </tr>
                <tr>
                    <td align="center" height="7" style="font-size:0px;line-height:0px;">&nbsp;</td>
                </tr>
            </table>
<!-- blue logo header -->
            <table width="624" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:auto;" class="100">
                <tr>
                    <td bgcolor="#097ac0">
                        <table height="90" align="right" border="0" cellpadding="0" cellspacing="0" style="margin:0px;" class="aba_logo">
                            <tr>
                                <td colspan="2" height="20" style="padding:0px;line-height:0px;font-size:0px;" class="aba_logo">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="left" width="122" style="padding:0px;"><a href="http://www.americanbar.org"><img style="display:block;" src="http://www.americanbar.org/content/dam/aba/images/membership_marketing/emailtemplates/aba_logow.png" width="100" height="50" alt="ABA" border="0"></a></td>
                                <td width="40" align="left" style="padding:0px;line-height:0px;font-size:0px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="2" height="20" style="padding:0px;line-height:0px;font-size:0px;" class="aba_logo">&nbsp;</td>
                            </tr>
                        </table>
                        <table width="400" align="left" border="0" cellpadding="0" cellspacing="0" style="margin:0px;" class="100">
                            <tr>
                                <td height="20" style="padding:0px;line-height:0px;font-size:0px;" class="hide">&nbsp;</td>
                            </tr>
                            <tr>
                                <td width="400" align="center" style="padding:0px 0px 0px 20px;color:#ffffff; font-size:16px;text-align:left;" class="header"><b style=" font-size:18px;line-height:24px;">{{#1-Header}}</b></td>
                            </tr>
                            <tr>
                                <td height="10" style="padding:0px;line-height:0px;font-size:0px;" class="100">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
<!-- corners -->
            <table width="624" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:auto;" class="hide">
                <tr>
                    <td width="12" height="11" style="padding:0px;"><img src="http://www.americanbar.org/content/dam/aba/marketing/corner-l.png" width="12" height="11" style="display:block;border-style:none;" border="0"/></td>
                    <td height="11" width="600" bgcolor="#FFFFFF" style="height:11px;padding:0px;font-size:0px;line-height:0px;">&nbsp;</td>
                    <td width="12" height="11" style="padding:0px;"><img src="http://www.americanbar.org/content/dam/aba/marketing/corner-r.png" width="12" height="11" style="display:block;border-style:none;" border="0"/></td>
                </tr>
            </table>
            <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:auto;" class="100">
<!-- Big Pretty Picture -->
                {{#2-HeroImage <!-- begin #VALUE# -->
                <tr>
                    <td bgcolor="#FFFFFF" valign="top" align="center" style="padding:0px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0px;">
                            <tr>
                                <td height="20" style="padding:0px; font-size:0px;line-height:0px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                }}
                                <a href="{{#2-Hero-Link #VALUE#&amp;sc_channel=email&amp;sc_sid=&amp;CUSTOMER_NUMBER;&amp;sc_jid=}}{{*JobID}}{{#Campaign &amp;sc_cid=#VALUE#}}{{#Mktcode &amp;Promo=#VALUE#}}">
                                {{#2-HeroImage <img src="#VALUE#" title="#TITLE#" width="100%" height="180" style="background:#E5E5E5;max-width:540px;">}}
                                {{#2-Hero-Link <!-- end #VALUE# --></a>}}
                {{#2-HeroImage <!-- end #VALUE# -->
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                }}
<!-- Img-Copy_Centered -->
                <tr bgcolor="#FFFFFF">
                    <td style="padding:0px 30px 0px 30px;">
                        <table width="540" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0px;" class="100">
                            <tr>
                                <td height="10" style="padding:0px; font-size:0px;line-height:0px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td width="540" align="center" style="padding:20px 0px 25px 0px; text-align:left;font-size:14px; line-height:22px;" class="100">
                                <a href="{{#2-Hero-Link}}&amp;sc_channel=email{{#Campaign &amp;sc_cid=#VALUE#}}&amp;sc_jid={{*JobID}}&amp;sc_sid=&amp;CUSTOMER_NUMBER;{{#Mktcode &amp;sc=#VALUE#}}{{#Mktcode &amp;Promo=#VALUE#}}" style="text-decoration:none;color:#0079C1;">{{#2-Title1 <span style="font-size:16px; font-weight:bold;line-height:22px;">#VALUE#</span><br>
                                }}</a>
                                {{#multi:repeat 
                                {{#2-LongCopy}}<br><br>
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="margin:0px;">
                                        <tr>
                                            {{#ListElement 
                                            <td width="10%" style="padding:0px 0px 0px 30px; text-align:right;line-height:18px;font-size:14px; font-family:Verdana, sans-serif;">#VALUE#</td>
                                            }}
                                            {{#ListCopy <td width="90%" style="padding:0px 0px 0px 5px;line-height:18px;font-size:14px; font-family:Verdana, sans-serif;">#VALUE#</td>
                                        </tr>
                                        <tr>
                                            <td height="5px" colspan="2" style="padding:0px;font-size:0px;line-height:0px;">&nbsp;</td>
                                        </tr>
                                        }}
                                    </table>
                                }}
                                </td>
                            </tr>
                            <tr>
                                <td height="10" style="padding:0px; font-size:0px;line-height:0px;">&nbsp;</td>
                            </tr>
                            {{#1-Hero-button <!-- begin #VALUE# -->
                            <tr>
                                <td height="10" style="padding:0px;line-height:0px; font-size:0px;" class="100">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center" style="padding:0px;">
                                    <table width="250" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0px;" class="100">
                                        <tr>
                                            <td align="center" width="250" style="padding:0px;" class="100">
                                            }}
                                            <a href="{{#2-Hero-Link #VALUE#&amp;sc_channel=email&amp;sc_sid=&amp;CUSTOMER_NUMBER;&amp;sc_jid=}}{{*JobID}}{{#Campaign &amp;sc_cid=#VALUE#}}{{#Mktcode &amp;Promo=#VALUE#}}">{{#1-Hero-button <img src="#VALUE#" alt="#TITLE#"  width="250" height="35" style="background:#E5E5E5;">}}</a>
                                        {{#1-Hero-button <!-- end #VALUE# -->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>}}
                            <tr>
                                <td height="30" style="padding:0px;line-height:0px; font-size:0px;">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
<!-- mm-smfooter -->
                <tr>
                    <td>
                        <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf1f7" class="mm-smfooter">
                            <tr>
                                <td colspan="4" height="10" style="padding:0px;font-size:0px;line-height:0px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td width="10%" align="center" valign="middle" style="padding:0px;">
                                    <table width="80%" border="0" align="center" cellpadding="0" cellspacing="2">
                                        <tr>
                                            <td width="10%" align="left" valign="bottom" nowrap style="vertical-align:text-bottom;"><A href="http://www.facebook.com/AmericanBarAssociation"><img src="http://www.americanbar.org/content/dam/aba/marketing/fb.jpg" alt="Facebook" width="38" height="39" hspace="0" vspace="0" border="0" align="baseline" /></A></td>
                                            <td width="50%" align="left" bgcolor="#ecf1f7" valign="bottom" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#013a65; vertical-align:text-bottom; padding:0px 0px 0px 0px;background-color:#ecf1f7; text-align:left;" class="hide"><A href="http://www.facebook.com/AmericanBarAssociation" style="color:#2570a1; vertical-align:text-bottom; text-decoration:none">Like</A></td>
                                        </tr>
                                        <tr>
                                            <td class="hide" width="100%" align="left" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:3px;" colspan="2"><A href="http://www.facebook.com/AmericanBarAssociation" style="font-family:Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#2570a1;">Exclusive Content<br>Member Benefits</A></td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="10%" align="center" valign="middle" nowrap style="margin-top:10px;">
                                    <table width="90%" border="0" align="center" cellpadding="0" cellspacing="2">
                                        <tr>
                                            <td width="10%" align="left" valign="bottom" nowrap style="vertical-align:text-bottom;"><A href="http://twitter.com/#!/abaesq"><img src="http://www.americanbar.org/content/dam/aba/marketing/tweet.jpg" alt="Twitter" width="38" height="39" hspace="0" vspace="0" border="0" align="baseline" /></A></td>
                                            <td width="50%" align="left" bgcolor="#ecf1f7" valign="bottom" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#013a65; vertical-align:text-bottom; padding:0px 0px 0px 0px;background-color:#ecf1f7; text-align:left;" class="hide"><A style="color:#2570a1; vertical-align:text-bottom; text-decoration:none;" href="http://twitter.com/#!/abaesq">Follow</A></td>
                                        </tr>
                                        <tr>
                                            <td class="hide" width="100%" align="left" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:3px;" colspan="2"><A href="http://twitter.com/#!/abaesq" style="text-decoration:none; color:#2570a1;">ABA News<br>Promotions</A></td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="10%" align="center" valign="middle" nowrap style="margin-top:10px;">
                                    <table width="20%" border="0" align="center" cellpadding="0" cellspacing="2">
                                        <tr>
                                            <td width="10%" align="left" valign="bottom" nowrap style="vertical-align:text-bottom;"><A href="http://www.linkedin.com/company/american-bar-association"><img src="http://www.americanbar.org/content/dam/aba/marketing/linkedin.jpg" alt="LinkedIn" width="38" height="39" hspace="0" vspace="0" border="0" align="baseline" /></A></td>
                                            <td width="50%" align="left" bgcolor="#ecf1f7" valign="bottom" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#013a65; vertical-align:text-bottom; padding:0px 0px 0px 0px;background-color:#ecf1f7; text-align:left;" class="hide"><A style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#2570a1; vertical-align:text-bottom; text-decoration:none" href="http://www.linkedin.com/company/american-bar-association">Connect</A></td>
                                        </tr>
                                        <tr valign="bottom">
                                            <td class="hide" align="left" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:3px;" colspan="2"><A href="http://www.linkedin.com/company/american-bar-association" style="text-decoration:none; color:#2570a1;">Professional Development<br>Practice Management</A></td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="10%" align="center" valign="middle" nowrap style="margin-top:10px;">
                                    <table width="20%" border="0" align="center" cellpadding="0" cellspacing="2">
                                        <tr>
                                            <td width="10%" align="left" valign="bottom" nowrap style="vertical-align:text-bottom;"><A href="http://apps.americanbar.org/abastore/index.cfm"><img src="http://www.americanbar.org/content/dam/aba/marketing/shop.jpg" alt="ShopABA.org" width="38" height="39" hspace="0" vspace="0" border="0" align="baseline" /></A></td>
                                            <td width="50%" align="left" bgcolor="#ecf1f7" valign="bottom" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#013a65; vertical-align:text-bottom; padding:0px 0px 0px 0px;background-color:#ecf1f7; text-align:left;" class="hide"><A style="color:#2570a1; text-decoration:none" href="http://shop.americanbar.org/ebus/default.aspx">Shop</A> &nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td class="hide" width="100%" align="left" nowrap style="font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:3px;" colspan="2"><A href="http://shop.americanbar.org/ebus/default.aspx" style="text-decoration:none; color:#2570a1;">ShopABA.org<br>Books, CLE and more</A></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="10" colspan="4" style="padding:0px;font-size:0px;line-height:0px;">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
<!-- footer -->
                <tr>
                    <td align="center">
                        <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="100">
                            <tr>
                                <td height="10" colspan="5" style="padding:0px; font-size:0px; line-height:0px;">&nbsp;</td>
                            </tr>
                            {{#DisclaimersHTML 
                            <tr>
                                <td valign="top" style="font-size:12px; line-height:15px; text-align:center; padding:0px; color:#666666;">#VALUE#</td>
                            </tr>
                            <tr>
                                <td height="10" colspan="5" style="padding:0px; font-size:0px; line-height:0px;">&nbsp;</td>
                            </tr>
                            }}
                            <tr>
                                <td valign="top" style="font-size:12px; line-height:15px; text-align:center; padding:0px; color:#666666;">This message was sent to <span style="color:#666666;">&EMAIL_ADDRESS;</span>.<br>Your e-mail address will only be used within the ABA.<br>We do not sell or rent e-mail addresses.</td>
                            </tr>
                            <tr>
                                <td height="10" colspan="5" style="padding:0px; font-size:0px; line-height:0px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center" style="font-size:12px; padding:0;">
                                    <table lang="en" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0;" class="100">
                                        <tr>
                                            <td align="center" height="0" valign="top" style="font-family:Verdana, Geneva, sans-serif; height:18px; padding:0; line-height:18px; font-size:12px;" class="footerlinks">
                                                <table width="115" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:0;" class="100">
                                                    <tr>
                                                        <td align="center" style="padding:0px;text-align:center;" class="footerlinks"><A href="http://shop.americanbar.org/eBus/MyABA.aspx{{#Campaign ?sc_cid=#VALUE#&sc_sid=&CUSTOMER;&sc_jid=}}{{*JobID}}" title="Update Your Profile" style="color:#666666; font-size:12px;">Update profile</A></td>
                                                    </tr>
                                                </table>
                                                <table width="130" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:0;" class="100">
                                                    <tr>
                                                        <td align="center" style="padding:0px;text-align:right;" class="footerlinks"><A href="http://shop.americanbar.org/ebus/myABA/CommunicationPreferences.aspx{{#Campaign ?sc_cid=#VALUE#&sc_sid=&CUSTOMER;&sc_jid=}}{{*JobID}}" title="Manage Your Communications Preferences." style="color:#666666; font-size:12px;">E-mail preferences</A></td>

                                                    </tr>
                                                </table>
                                                <table width="115" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:0;" class="100">
                                                    <tr>
                                                        <td align="center" style="padding:0px;text-align:right;" class="footerlinks"><A href="http://shop.americanbar.org/ebus/unsubscribe.aspx?token=&UNSUBSCRIBE_TOKEN;{{#Campaign &sc_cid=#VALUE#&sc_sid=&CUSTOMER;&sc_jid=}}{{*JobID}}" title="Unsubscribe" style="color:#666666; font-size:12px;">Unsubscribe</A></td>

                                                    </tr>
                                                </table>
                                                <table width="115" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:0;" class="100">
                                                    <tr>
                                                        <td align="center" style="padding:0px;text-align:right;" class="footerlinks"><A href="http://www.americanbar.org/utility/privacy.html{{#Campaign ?sc_cid=#VALUE#&sc_sid=&CUSTOMER;&sc_jid=}}{{*JobID}}" title="Privacy Policy. " style="color:#666666; font-size:12px;">Privacy Policy</A></td>

                                                    </tr>
                                                </table>
                                                <table width="110" border="0" align="right" cellspacing="0" cellpadding="0" style="margin:0;" class="100">
                                                    <tr>
                                                        <td align="center" style="padding:0px;text-align:center;" class="footerlinks"><A href="http://www.americanbar.org/utility/about_the_aba/contact.html{{#Campaign ?sc_cid=#VALUE#&sc_sid=&CUSTOMER;&sc_jid=}}{{*JobID}}" title="Contact Us" style="color:#666666; font-size:12px;">Contact Us</A></td>

                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="10" colspan="5" style="padding:0px; font-size:0px; line-height:0px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td valign="top" style="padding:0px; font-size:12px; line-height:15px; text-align:center; color:#666666;">American Bar Association | <span style="color:#666666;">321 N Clark, Chicago, IL 60654-7598<br>800-285-2221 | 312-988-5522</span> </td>
                            </tr>
                            <tr>
                                <td height="10" colspan="5" style="padding:0px; font-size:0px; line-height:0px;">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<unsubscribe>&nbsp;</unsubscribe>
</BODY>
</HTML>