Hello!

I'm having difficulty with getting a media query for a HTML email to render on the iPhone properly. Here's a hosted screenshot: https://ibb.co/c4sX7d

I tested on Android and the footer stacks but for some reason on iPhone it's not. Here's the code for the footer section:



                    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0"> 
                        <tbody> 
                            <tr> 
                                <td valign="top" align="center" style="padding: 0px"> 
                                <!--[if mso]> <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"> <![endif]--> 
                                    <div style="min-width: 50px; min-height: 20px;width:100%; display: inline-block; text-align: center; vertical-align:top"> 
                                        <table cellspacing="0" cellpadding="0" border="0"> 
                                            <tbody> 
                                                <tr> 
                                                    <td valign="top" align="center" style="padding:10px 10px"> 
                                                        <div itm-edit="myedittext8" itm-footer="true"> 
                                                            <table class="responseFooter" style="width: 575px;" width="100%"> 
                                                                <tbody> 
                                                                        <tr align="center"> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 37px;">Home</td> 
                                                                        <td class="footerGrid line" style="width: 8px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 54px;">Locations</td> 
                                                                        <td class="footerGrid line" style="width: 8px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 33px;">Menu</td> 
                                                                        <td class="footerGrid line" style="width: 9px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 23px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image.png"></a></td> 
                                                                        <td class="footerGrid line" style="width: 9px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 19px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image2.png"></a></td> 
                                                                        <td class="footerGrid line" style="width: 3px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 17px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image3/png"></a></td> 
                                                                        <td class="footerGrid line" style="width: 5px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 72px;">Guest Feedback</td> 
                                                                        <td class="footerGrid line" style="width: 6px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 46px;">Gift Cards</td> 
                                                                        <td class="footerGrid line" style="width: 4px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 97px;">Update Your Account</td> 
                                                                        <td class="footerGrid line" style="width: 7px; color: white;">|</td> 
                                                                        <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 55px;">Unsubscribe</td> 
                                                                    </tr> 
                                                                </tbody> 
                                                            </table> 
                                                        </div>
                                                    </td> 
                                                </tr> 
                                            </tbody> 
                                        </table> 
                                    </div> 
                                <!--[if mso]> </td></tr></table> <![endif]--> </td> 
                            </tr> 
                        </tbody> 
                    </table>

Here's my CSS:


@media (max-width:480px) {
    .footerGrid{
        display: inline-block !important;
        font-size: 25px !important;
        width: 100% !important;
        padding: 20px 0 20px 0;
    }

    .line{
        display: none !important;
    }

    .responseFooter{
        width: 100% !important;
    }

    .footerGrid img {
        width: 25px !important;
    }
}