CODEWITHSUNDEEP
androidhtmlcsshtml-emailemail-client
Dovid Levine
Dovid Levine

Reputation: 167

Responsive Image Alignment in GMail App

Trying to code a responsive email template, and the GMail app keeps throwing me for a loop.

I've got a 3-column of images that I want to display one on top of the other (align="center"). Yet for some reason, when it goes through the gmail app, the alignment goes all wacky (two are aligned left, with some padding, one aligned right).

Suggestions to fix?

It looks like this: !(https://drive.google.com/file/d/0B26Uw_LjUlM-LWNfWnZkR3VvVEU).

Heres the code:

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap" style="border-collapse: collapse;background-color: #ffffff;">
                            <tr>
                                <td height="20">
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td class="padding2" style="padding: 0 20px;">
                                    <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad1" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="10" align="left" border="0" cellpadding="0" cellspacing="0" class="hide600" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td height="10">
                                                <br />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad2" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="180" align="right" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad3" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="20">
                                    <br />
                                </td>
                            </tr>
                        </table>

And the CSS:

@media only screen and (max-width: 599px) {
            table[class~=button][class~=b], table[class~=color-icon-s], table[class~=color-icon-m] { width:240px !important; max-width:240px !important; height:auto;}
            table[class~=color-icon-m], table[class~=color-icon-b], table[class~=color-icon-s] { float:none !important; margin:0 auto !important; }
            table[class~=mid3] { margin-bottom:30px !important; }
            td[class~=mid3] { margin-bottom:30px !important; }
            table[class~=hide600], td[class~=hide600] { display:none !important; }
}
@media only screen and (max-width: 439px) {
            td[class~=padding-2-440] { padding:0 20px !important; }
}
@media only screen and (max-width: 339px) {
            table[class~=wrap], table[class~=version] { width:100% !important; }
            }

Upvotes: 2

Views: 6517

Answers (2)

Anton Donev
Anton Donev

Reputation: 11

You have to change the two tables align values to align="center". This will cause the tables to be centered in all clients. Then apply class "left" and "right" with floats in the media query in the head section like this:

.left { float: left !important; } .right { float: right !important; }

Since gmail app strips the styles in the head this css won't have effect in gmail and they will remain centered. Then you will have align=centered issues with Outlook not supporting floats. To right/left align again just add conditional tags only for Outlook before and after the two centered and foated tables like this:

<!--[if (gte mso 9)|(lte ie 8)]> <table align="right" valign="top" width="49%"> <tr> <td valign="top" style="border-collapse: collapse;"> <![endif]-->

// your markup here: <table width="49%" align="center" ...

<!--[if (gte mso 9)|(lte ie 8)]> </td> </tr> </table> <![endif]-->

Set the align value to left and right for both tables in the conditional and you'll have it centered in gmail app and left/right in outlook.

Cheers

Upvotes: 1

Brett D.
Brett D.

Reputation: 116

Gmail App doesn't support media queries (source: https://litmus.com/help/email-clients/media-query-support/). Therefore any CSS that is not inlined will not be rendered.

That said, Gmail App should be scaling the view to fit the screen. I would change two things in your code.

  1. Avoid setting fixed widths for your images. Do something like <img src="path/here/" style="width:100%;max-width:180px" width="180" />.
  2. Set a width percentage for the <td> containing the image. You could try <td style="width:33.3333%;">.

I hope this helps.

Upvotes: 2

Related Questions