CODEWITHSUNDEEP
cssgmailmedia-querieshtml-email
Max
Max

Reputation: 41

How do I get my responsive email to work in Gmail?

I can't get my email template to show the mobile version on Gmail. I've tried different solutions from various posts on here and nothing is working. The email is responsive in Apple Mail and even Samsung Mail. I included the css below, any help would be greatly appreciated as I've been stuck on this issue for at least a year now it seems.

<style type="text/css">
@media only screen and (max-width: 600px) {
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body[yahoo] .all {
width: 355px !important;
}
body[yahoo] .no-mobile {
text-indent: -99999em !important;
display: none !important;
}
body[yahoo] .mobile-only {
text-indent: 0 !important;
display: block !important;
height: auto !important;
visibility: visible !important;
overflow: visible !important;
max-height: none !important;
}

}

Upvotes: 4

Views: 10843

Answers (1)

HTeuMeuLeu
HTeuMeuLeu

Reputation: 2751

The first thing I see is the [yahoo] hack. Attribute selectors are not supported in Gmail. And the [yahoo] hack in itself is no longer needed since march 2015.

The second thing to be aware of with Gmail, is that no all versions of Gmail support <style> and media queries. If you're testing on Gmail mobile webmail or on a Gmail app (iOS or Android) with a non Gmail account (an Outlook.com email address for example), you won't have support for media queries there. I wrote about this here: Trying to make sense of Gmail CSS support.

Here’s a full code example that works in Gmail desktop webmail and mobile apps (iOS or Android) with a Gmail account. Here’s a link to test previews on Email on Acid.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How do I get my responsive email to work in Gmail?</title>
    <style>
        @media only screen and (max-width: 600px) {
            .all {
                width: 355px !important;
            }
            .no-mobile {
                text-indent: -99999em !important;
                display: none !important;
            }
            .mobile-only {
                text-indent: 0 !important;
                display: block !important;
                height: auto !important;
                visibility: visible !important;
                overflow: visible !important;
                max-height: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="all" style="background:green;">.all</div>
    <div class="no-mobile" style="background:orange;">.no-mobile</div>
    <div class="mobile-only" style="background:purple; display:none">.mobile-only</div>
</body>
</html>

Upvotes: 7

Related Questions