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.

2 of 2
2
   
Outlook image sizes

kels

Newbie
Total Posts:  5
Posted: 07 July 2015 02:58 PM
[ # 16 ]

This method doesn’t seem to work with Outlook 2003 or Live Mail. Is there a solution for those clients for this issue?


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 July 2015 01:15 PM
[ # 17 ]

kels,
Do you mean that the HTML attributes don’t work to control image size in Outlook 2003 and Live Mail?

I just ran a test, and as you can see the HTML attributes do constrain the size of the images in those clients.

https://www.emailonacid.com/app/acidtest/display/summary/CsSrMgnmOyRs1WGf0PNyX61kYT09FSlYkXjRwb7KOCMIG/shared


 

kels

Newbie
Total Posts:  5
Posted: 09 July 2015 02:03 PM
[ # 18 ]

@Geoff, I’m trying to do a mobile first responsive design and have set the width and height attributes on the image but I also have the width set to 100% in the style tags the image always shows the full width in Outlook 2003 and Live Mail but the others are fine. Could that be what’s causing the problem?

Is there a better way to do what I’m trying to do? I’m working on an email that has two columns in some places.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 July 2015 02:16 PM
[ # 19 ]

Kels,
Can you post a sample of the code you’re working with? Just use [code ] and [/code ] around the code sample (and without the extra spaces).


 

kels

Newbie
Total Posts:  5
Posted: 09 July 2015 02:28 PM
[ # 20 ]

I just tried this below and it’s the full width of 970 and not 660. I can open a ticket through my company’s account so you can see the tests if you need them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html >
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
meta name="viewport" content="width=device-width, initial-scale=1.0">

<
title>Newsletter subject</title>

</
head>
<
body>

    <
table class="newsletter-wrapper" width="660" cellspacing="0" cellpadding="0" align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: auto;max-width: 660px;margin: 0 auto;padding: 0;border-collapse: collapse !important;vertical-align: top;text-align: left;">
        <
tr>
            <
td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
            
                <
table class="content-wrapper" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;background: #ffffff;border-collapse: collapse !important;">
                    <
tr>
                        <
td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">

                            <
table width="100%" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                                <
tr>
                                    <
td class="full-image" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;display: block;line-height: 0;font-size: 0;">
                                        <
a href="#" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline;color: #0989ff;text-decoration: none;font-weight: bold;"><img src="image-970x250.jpg" width="660" height="170" alt="image" style="-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: block;width: 100%;"></a>
                                    </
td>
                                </
tr>
                            </
table>

                        </
td>
                    </
tr>
                </
table>
            
            </
td>
        </
tr>
    </
table>
    
</
body>
</
html

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 July 2015 02:33 PM
[ # 21 ]

Kels,
Are you able to use media queries? If so, I would suggest setting the width to 100% for mobile devices using media queries. Then you could leave width=100% off of the inline styles.


 

kels

Newbie
Total Posts:  5
Posted: 09 July 2015 02:41 PM
[ # 22 ]

I have no problem using media queries but how can I make this work for users that are using the Gmail app? More that 50% of our opens are mobile and we have quite a bit of Gmail subscribers.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 July 2015 03:15 PM
[ # 23 ]

Not sure this will completely fix it, but I think if you just switch “width: 100%” to “min-width: 100%” it might do the trick.


 

kels

Newbie
Total Posts:  5
Posted: 09 July 2015 03:45 PM
[ # 24 ]

@Geoff, that freaking WORKS! I tried min-width early on for something and it didn’t work as intended so I didn’t even think to try that on images. Thank you!


 
2 of 2
2