Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Android Gmail 6 not showing images in my columns

akwilinski

Newbie
Total Posts:  2
Posted: 30 November 2016 01:55 PM

Hi everyone,

I need some help on my responsive email.
I have a two column side by side email with one images and then some copy.
1. On Android Gmail 6 app the images in my 2 column layout don’t show up.

2. In Gmail iOS 7 app I can not get my two column to stack like it does on Android.

My code is below and attached, any help is appreciated!
Thanks.
-Ann

<!-- 2 Column Images Text Side by SIde -->
    <
table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#eb342e" style="margin:0 auto;">
        <
tr>
            <
td>
                <
table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                    <
tr>
                        <
td valign="top" align="center" class="center forgmailapp">
                            <
p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img src="https://gallery.mailchimp.com/630a55f8fa17c2a66aa8632ec/images/0d4bff9d-9333-4795-9912-212757366006.jpg" alt="Check Out the new DWB Website" border="0" style="width: 300px; min-width:300px; display: block;" class="deviceWidth"></a></p>
                         </
td>
                     </
tr>
                 </
table>
                 <
table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                     <
tr>
                        <
td align="left" style="font-family: Helvetica, Arial, sans-serif, sans; font-size:14px; line-height:23px; mso-line-height-rule:exactly; font-weight:normal; color:#ffffff; vertical-align: top; padding:15px;">
                             <
table>
                                <
tr>
                                    <
td align="left" style="font-family: Helvetica, Arial, sans-serif, sans; font-size: 24px; line-height:30px; mso-line-height-rule:exactly; font-weight:bold; color:#ffffff; vertical-align: top;"><a href="#" target="_blank" style="text-decoration: none;"><span style="color:#ffffff;">New LookSame Homemade Taste</span></a>
                                    </
td>
                                </
tr>
                            </
table>
                                <
br>
                                    <
p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">Our website has a new look with new recipes and tons of #funwithfood pancake creations the kids will love! There might be some pretty pin-worthy ideas on there.<br><br></p>
                    
<!-- Button BEGIN -->
                        <
table align="left">
                            <
tr>
                                <
td style="border-radius: 3px; background: #ffffff; text-align: center;" class="button-td">
                                    <
a href="http://bit.ly/DWB2017Cal" style="background: #ffffff; border: 12px solid #ffffff; padding: 0 10px;color: #272727; font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"
                                      <!--
[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->Visit Site<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--> 
                                      </
a>
                                </
td>
                            </
tr>
                          </
table>
                      <!-- 
Button END -->              
                            </
td>
                        </
tr>
                    </
table>
            </
td>
        </
tr>
    </
table><br>
<!-- 
End 2 Column Images Text Side by Side --> 
File Attachments
ARCHIVE.html  (File Size: 28KB - Downloads: 108)

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 30 November 2016 02:28 PM
[ # 1 ]

akwilinski,
Welcome to the forum!

1. This was caused by not putting a URL in the href of your link. I use href=“http://www.example.com” for testing.
2. This is because our iOS Gmail apps don’t yet have the update that makes them responsive. On a phone with the updated Gmail app, this should work fine if you remove the attribute selectors (body[yahoo]) from your media queries, and move all of the media queries to the bottom of your style block.

I hope that helps!


 

akwilinski

Newbie
Total Posts:  2
Posted: 30 November 2016 03:11 PM
[ # 2 ]

Geoff–You are a lifesaver, #1 is fixed!  Thank you so much.

I still have the gmail iOS 7 issue.
I took off the (body[yahoo]) from the media queries like you suggested, and moved them to the end of the style block, but i still have the image and text side by side instead of stacking.
I don’t know if you can see this link but this is what it looks like: https://eoass.s3.amazonaws.com/web/2016-11-30/gmailapp_ios/89007_145939.png?n=0

Again, thank you for taking a look.
-Ann


 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 30 November 2016 04:37 PM
[ # 3 ]

Ann,
Our iOS Gmail previews won’t show the email stacking as it should because they haven’t yet received the new Gmail update. But it should work on a real device!