Setting up responsive images

Hello

I've created a 3 column row that includes editable images. For screens < 660px the columns (in reality individual tables aligned left) will collapse into one column.

So for larger screens 3 columns will present the images at 180px wide, and smaller screens will show a single column layout with the images expanding to 280px wide

In my template code I'm bringing in the image at 280px wide since Campaign Monitor crops at stated width. (see code below)

<td class="col_180" width="180"><img editable="true" label="Image (280px)" class="col_180" style="height:auto;" width="280" height="" border="0"></td>

My problem is that gmail brings in height:auto as min-height:auto. This leaves the images to reflect the height taken from the img tag height attribute, which Campaign Monitor automatically fills in.  For the 3 column layout it means the image aspect ratio is off.

I've read that if I leave the img tab height attribute empty (height"") that I can get around this issue, but since that is filled in by Campaign Monitor I'm not sure how to make this work.  I can't be the only one running into this problem. Has anybody found a solution?

In case it's helpful I've added the code for the 3 column layout below

<layout label="3 Column Layout (Images == 280px)">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td class="col_180" width="180" valign="top">
                
                
                <table class="col_180" width="180" cellpadding="0" cellspacing="0" border="0" align="left">
                    <tbody>
                        <tr>
                            <td class="col_180" width="180"><span align="left" class="article-title"><singleline label="Title">Add a title</singleline></span></td>
                        </tr>
                        <tr>
                            <td class="col_180" width="180"><img editable="true" label="Image (280px)" class="col_180" style="height:auto;" width="280" height="" border="0"></td>
                        </tr>
                        <tr><td class="col_180" width="180" height="5"></td></tr>
                        <tr>
                            <td class="col_180" width="180">
                                <div align="left" class="article-content">
                                    <multiline label="Description">Enter your description</multiline>
                                </div>
                            </td>
                        </tr>
                        <tr><td class="col_180" width="180" height="20"></td></tr>
                    </tbody>
                </table>
                
                
                
                <table class="mobilehide" width="20" cellspacing="0" cellpadding="0" align="left"><tr><td width="20"><img width="20" border="0" src="spacer.png"></td></tr></table>


            
                <table class="col_180" width="180" cellpadding="0" cellspacing="0" border="0" align="left">
                    <tbody>
                        <tr>
                            <td class="col_180" width="180"><span align="left" class="article-title"><singleline label="Title">Add a title</singleline></span></td>
                        </tr>
                        <tr>
                            <td class="col_180" width="180"><img editable="true" label="Image (280px)" class="col_180" style="height:auto;" width="280" height="" border="0"></td>
                        </tr>
                        <tr><td class="col_180" width="180" height="5"></td></tr>
                        <tr>
                            <td class="col_180" width="180">
                                <div align="left" class="article-content">
                                    <multiline label="Description">Enter your description</multiline>
                                </div>
                            </td>
                        </tr>
                        <tr><td class="col_180" width="180" height="20"></td></tr>
                    </tbody>
                </table>
                
                
                
                
                <table class="mobilehide" width="20" cellspacing="0" cellpadding="0" align="left"><tr><td width="20"><img width="20" border="0" src="spacer.png"></td></tr></table>
            
            
            
            
                <table class="col_180" width="180" cellpadding="0" cellspacing="0" border="0" align="left">
                    <tbody>
                        <tr>
                            <td class="col_180" width="180"><span align="left" class="article-title"><singleline label="Title">Add a title</singleline></span></td>
                        </tr>
                        <tr>
                            <td class="col_180" width="180"><img editable="true" label="Image (280px)" class="col_180" style="height:auto;" width="280" height="" border="0"></td>
                        </tr>
                        <tr><td class="col_180" width="180" height="5"></td></tr>
                        <tr>
                            <td class="col_180" width="180">
                                <div align="left" class="article-content">
                                    <multiline label="Description">Enter your description</multiline>
                                </div>
                            </td>
                        </tr>
                        <tr><td class="col_180" width="180" height="20"></td></tr>
                    </tbody>
                </table>
                
                
            </td>
        </tr>
    </tbody>
</table>
</layout>

Thanks for any insights!
Jules

paulw paulw, 2 years ago

Hey Jules,

This is a tricky one to solve, you may have noticed that the code you currently have will also cause some problems in Outlook 07, 10 and 13 . In those programs the images will remain as 280 pixels and won't resize to 180 pixels on the desktop version.

For this reason, the best solution may be to resize the images to 180 pixels within the image tag and apply a class that resizes the image to 280 pixels on mobile. This will work okay, but obviously the image may lose some resolution.

Hope that could work for you!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
JulesWebb JulesWebb, 2 years ago

Hi paul, thanks for the response.

RE: Outlook-- yep! So I guess 180 it is.

The bigger problem ended up being the removal of extra border space between tables in outlook where they are aligned left/right. I learned a lot from the two links below.

http://www.campaignmonitor.com/blog/post/3694/

http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010

The one issue I have not been able to resolve is that of the three tables the left table sits higher than the middle and right table in Outlook. I can't figure out why. It's definitely not a lack of horizontal space issue.

Have you any experience with this?

JulesWebb JulesWebb, 2 years ago

Hello again

So I've resolved the align left spacing issue and everything looks good, but I can't seem to get the borders of my "gutter tables" to either be white or transparent in Outlook. (See image below)

http://webbdemo.com/images/outlook-tables.png

Below is the code for just the "gutter" spacer tables that are pointed out in the image above.

<table class="mobilehide" width="4" height="1" cellspacing="0" cellpadding="0" border="7" bordercolor="#FFFFFF" bgcolor="#FFFFFF" align="left" style="mso-table-lspace:0;mso-table-rspace:0; border-color:FFFFFF; background-color:#FFFFFF"><tbody>
  <tr>
    <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" width="4"><span style="mso-table-lspace:0;mso-table-rspace:0;">
        <img width="4" border="0" style="background-color:#FFFFFF;" src="spacer.png"></span></td>
  </tr>
</tbody></table>

Does anybody have any insights on how to deal with this?
Gratefully --Jules

JulesWebb JulesWebb, 2 years ago

Hello?

JulesWebb JulesWebb, 2 years ago

For those that follow I found an answer that works. 

<div class="mobilehide" align="left">
        <img align="left" width="17" height="1" border="0" style="background-color:#FFFFFF;" src="spacer.png">
</div>

I didn't think I could align left a div element, I thought the align parameter was for table elements only. Anyways I tested the codebit above and it works just fine.  The only rub is that the gutter is suppose to be 20px, but I still have to accommodate 3px worth of Outlooks border issue. This means that in "normal" software ;) the row is 3px short on the right. Doubtful that many people would ever notice that discrepancy

Cheers!
Jules

skeg64, 2 years ago

Rather than trying to float tables next to each other, why not create one <tr> with 5 <td>'s inside? That is, 3 which contain sub-tables of content, and 2 in between those with a set width for gutters?
Aligning tables next to each other can be done, but causes lots of headaches!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098