media query resizing of image on Android Gmail App not working

Question

I am working on a responsive email, testing it in Litmus for Android 6.0 and on a Samsung Galaxy S7 physical device.

Here is my media query from the head style section:

@media screen and (max-width: 611px), screen and (max-device-width: 611px){
[class=devicewidth100]{width:100%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=devicewidth98]{width:98%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=devicewidth60]{width:60%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=imgdevicewidth]{width:100%!important; height:auto!important; margin-left:auto!important; margin-right:auto!important;}
[class=hide]{display:none !important;}
[class=center]{text-align:center!important; padding-top:5px!important; padding-bottom:5px!important; height:auto!important;}
}

Here is HTML code from the body:

<tr><td style="border-collapse: collapse;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div style="width: 185px;display: inline-block;vertical-align: top;margin-left: auto;margin-right: auto;height: auto!important;background-color: #FFFFFF!important;" class="devicewidth100">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;align-content: center;"><tr><td width="15" style="border-collapse: collapse;"></td><td width="170" class="devicewidth100" style="border-collapse: collapse;margin-left: auto;margin-right: auto;width: 100%!important;height: auto!important;background-color: #FFFFFF!important;"><a href="#" style="color: #F4F4F4;text-decoration: none!important;"><img src="http://placehold.it/810x456" alt="" style="border: none;display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;margin-left: auto;margin-right: auto;width: 100%!important;height: auto!important;background-color: #FFFFFF!important;" width="170" height="125" class="devicewidth100"></a></td><td width="15" style="border-collapse: collapse;"></td></tr></table></div><!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<div style="width: 430px;display: inline-block;vertical-align: middle;margin-left: auto;margin-right: auto;height: auto!important;background-color: #FFFFFF!important;" class="devicewidth100">
<table width="100%" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;align-content: center;">
<tr><td width="15" style="border-collapse: collapse;"></td><td align="left" class="center" style="text-align: left;border-collapse: collapse;padding-top: 5px!important;padding-bottom: 5px!important;height: auto!important;" height="125" valign="middle"><a href="#" style="font-family:'Open Sans', verdana; font-size:20px; font-weight:bold; color:#000000; line-height:22px; text-align:left; text-decoration:none;" class="fontsize-top-news">This is my text, it should get bigger on mobile screens at some point.</a></td></tr>
</table></div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr>

I am trying to make the image full-width with the media query. Since Litmus and the Galaxy S7 Gmail App are supposed to have CSS/Media Query support now, any suggestions?

Answer 1

I don't have a device to test, so it would only be a guess but I would try in the standard css notation:

@media screen and (max-width: 611px), screen and (max-device-width: 611px){
    .devicewidth100{
        width:100%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .devicewidth98{
        width:98%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .devicewidth60{
        width:60%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .imgdevicewidth{
        width:100%!important;
        height:auto!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .hide{
        display:none !important;
    }
    .center{
        text-align:center!important;
        padding-top:5px!important;
        padding-bottom:5px!important;
        height:auto!important;
    }
}

Answer 2

It may depend from what client you are using. Not all versions of gmail App support media queries yet.

Gmail Android app (POP/IMAP account) will not support media queries.

You can find the full list here:

Gmail Rolls Out Support for Responsive Design, Improved Font Styling + CSS for Accessibility