CODEWITHSUNDEEP
htmlemailgmailhtml-email
MaxwellLynn
MaxwellLynn

Reputation: 968

Is there a way to hide imagery in gmail for a html responsive email build?

I'm building an email that has to have images hidden on the desktop and shown on the mobile. Only way you can do this is using display none which isn't supported by gmail.

I was wondering if there is any other ways of hiding images on the desktop version so that i can use media queries to style the email in the mobile version.

The problem is only in gmail

Much thanks

Upvotes: 1

Views: 9640

Answers (4)

Julio
Julio

Reputation: 26

Inline style for desktop:

style="max-height:0;width:0;"

Responsive css @media query:

max-height: none !important;
width: auto !important;

Works like charm :)

Upvotes: 1

davidcondrey
davidcondrey

Reputation: 35983

In order to hide an element in an HTML email and have it work in Gmail you need to zero it out and adjust the sizing in your CSS (which Gmail will ignore).

Like so:

<style>
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }
</style>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <!--[if !mso]><!-->
        <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
        </td>
    </tr>
    <!--<![endif]-->
</table>

Additionally, the added conditional comment covers you for Outlook 07.

Upvotes: 1

samanthasquared
samanthasquared

Reputation: 1937

On your inline styles for desktop, make the width and height of the image 0. Then use your responsive media-query CSS to restore the image to its proper size.

Edit: Try adding mso-hide:all; to your inline css as well to fix issues with Outlook.

Upvotes: 4

James Donnelly
James Donnelly

Reputation: 128791

hidden isn't a valid value for display.

Try:

{
    display:none;
}

Or, if that still doesn't work, try:

{
    visibility:hidden;
    width:0;
    height:0;
    padding:0;
    margin:0;
}

Upvotes: 0

Related Questions