Hi all,

I'm trying to hide a cell on mobile, this includes an image. It seems to work fine on all email clients and mobile devices apart from Gmail.

Does anyone know why my class of "hide" with display: none !important would not be working? - CODE EXAMPLE BELOW.

Thanks,

Adam

CSS

-----------------------------------------

/* Give content more room on mobile */
        @media screen and (max-width: 480px) {
            td[class="container-padding"] {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            td[class="hide"] {
                display:none !important;
            }

HTML

----------------------------------------
<tr>
<td>
<table class="container" align="center" border="0" cellspacing="0" cellpadding="0" width="650" bgcolor="#d46d2d">
<tbody>
<tr>
<td class="hide"><img src="http://e.immediate.co.uk/files/amf_immediate_media/project_592/2016/October/Halloween_-_Email/Headerleftnew.jpg" border="0" alt="" width="79" height="295">&nbsp;</td>
<td><img class="shrink" src="http://e.immediate.co.uk/files/amf_immediate_media/project_592/2016/October/Halloween_-_Email/EmailHeadernew.jpg" border="0" alt="" width="492" height="295">&nbsp;</td>
<td class="hide"><img src="http://e.immediate.co.uk/files/amf_immediate_media/project_592/2016/October/Halloween_-_Email/Headerightnew.jpg" border="0" alt="" width="79" height="295">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>