Media Query is not working in mobile gmail app

Question

I am creating one html template for Gmail app. In I have added one image which should come 60% on the desktop view and 100% for mobile gmail app view.

This is img tag width 60%:

<div>
    <img src="show.jpg" alt="Show your skills" class="mob-img" border="0" 
    style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; 
    width:60%;" />
</div>

in media query I made it 100%. But it is not working in gmail app.

    @media only screen and (max-width: 600px) {
        .mob-img {
        width: 100% !important;
        }
    }

I am not getting why this is not working in gmail app. Please let me know if I am missing something.

Thanks in advance

Answer 1

The problem is: Gmail App isn't a "screen" media.

@media (max-width: 600px) {
    .mob-img {
    width: 100% !important;
    }
}

This solution works for me.

EDIT: Gmail ignores other media queries. Move the media query that is relevant to Gmail App to highest point possible.