Html e-mail banner image resized in Outlook for android - Mailchimp
I made a custom html e-mail template for mailchimp. It contains repeatable blocks that can be added in the classic campaign editor. All e-mail clients are going well except Outlook for android.
I have 3 variations of content blocks:
- Banner + Tekst (Banner full width, Text below banner full width)
- Product + Product (2 columns each half the width)
- Banner Only (same as 1, but without the textfield)
Now on Outlook for android, if we add the Product + Product block the image of the banner blocks Banner + Tekst and Banner Only will be resized to like 55% of the full width. If we place only the banner blocks the images are full width.
I tried multiple options like fixed 600px width (the full width of the mail) and a lot of others, spend more than 6 hours now to fix it but still no change.
The CONTENTBLOKS 1, 2 and 3. (Below jsfiddle with complete template)
<!-- BEGIN BODY // -->
<tr>
<td valign="top" id="templateBody" width="600">
<!-- BEGIN CONTENTBLOK 01 // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="contentbloks" mc:variant="Banner + Text">
<tr>
<td valign="top" class="banner-img" width="100%" colspan="2">
<img src="https://richterio.nl/gw/promo-image.jpg" alt="" border="0" width="600" style="max-width:600px;width:600px;margin:0;padding:0;" height="300" class="templateImage" mc:label="Promo_Image" mc:allowdesigner="" mc:allowtext="" mc:hideable mc:edit="promo_image_1">
</td>
</tr>
<tr>
<td valign="top" class="contentblok_1_text_column" width="100%">
<!-- BEGIN MODULE: BODY CONTENT // -->
<div mc:hideable mc:edit="body_content">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p><strong>Getting started!</strong><br>To choose your fonts, colors, and styles, click <strong>Edit Design</strong> at the bottom of this screen. After you create a look and feel you love, click inside this box to start adding your own content.</p>
<p>Any time you create a layout here, you'll be able to find it in the <strong>Saved Templates</strong> tab on the <strong>Templates</strong> step. Then, you can reuse it as-is or quickly create new, similar versions for different types of messages.</p>
<p>Our <a href="https://templates.mailchimp.com/">Email Design Reference</a> can help you add content blocks to this template or show you how to design and code your own from scratch.</p>
<!-- Button CTA // -->
<table cellpadding="5" cellspacing="0" align="center">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="btn">
<tbody>
<tr>
<td align="center" class="btn_cont green" valign="middle"><a href="https://www.gezondheidswinkel.nl/" target="_blank">Bekijk actie</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // Button CTA -->
</div>
<!-- // END MODULE: BODY CONTENT -->
</td>
</tr>
</table>
<!-- // END CONTENTBLOK 01 -->
<!-- BEGIN CONTENTBLOK 02 // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="contentbloks" mc:variant="Product + Product">
<tr>
<td valign="top" class="column1" style="max-width:282px;min-width:282px;" width="282">
<!-- BEGIN MODULE: PRODUCT CONTENT 02 PART 1 // -->
<div mc:hideable mc:edit="product_content_2_p1">
<table class="product_title" border="0" cellpadding="0" cellspacing="0" width="282">
<tr><td class="pad12 blue-light">
<h2>Gezond & Wel</h2>
<h1>Cranberry detox booster</h1>
<p>Goed voor de gal- en leverfunctie</p>
</td></tr>
</table>
</div>
<img src="https://richterio.nl/gw/product_blue.jpg" width="282" style="max-width:282px;width:282px;" class="templateImage" mc:label="Product Image" mc:allowdesigner="" mc:allowtext="" mc:edit="product_image_2_p1">
<div mc:hideable mc:edit="body_content_2_p1">
<table class="promo" border="0" cellpadding="0" cellspacing="0" width="282">
<tr>
<td class="pad12 blue">
<center>
<table cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<tr>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h2>KORTING</h2>
<table class="discount-s" cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<!-- Old Price/New Price 1 // -->
<tr><td>
<strong>Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 1 -->
<!-- Old Price/New Price 2 // -->
<tr><td>
<strong>
Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 2 -->
</tbody>
</table>
<!-- Button CTA // -->
<table cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="btn">
<tbody>
<tr>
<td align="center" class="btn_cont pink" valign="middle"><a href="https://www.gezondheidswinkel.nl/" target="_blank">Bekijk actie</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // Button CTA -->
</center>
</td>
</tr>
</table>
</div>
<!-- // END PRODUCT: PRODUCT CONTENT 02 PART 1 -->
</td>
<td valign="top" class="column2" style="max-width:282px;min-width:282px;" width="282">
<!-- BEGIN MODULE: PRODUCT CONTENT 02 PART 2 // -->
<div mc:edit="product_content_2_p2">
<table class="product_title" border="0" cellpadding="0" cellspacing="0" width="282">
<tr><td class="pad12 green-light">
<h2>Gezond & Wel</h2>
<h1>Cranberry detox booster</h1>
<p>Goed voor de gal- en leverfunctie</p>
</td></tr>
</table>
</div>
<img src="https://richterio.nl/gw/product_green.jpg" width="282" style="max-width:282px;width:282px;" class="templateImage" mc:label="Product Image" mc:allowdesigner="" mc:allowtext="" mc:edit="product_image_2_p2">
<div mc:hideable mc:edit="body_content_2_p2">
<table class="promo" border="0" cellpadding="0" cellspacing="0" width="282">
<tr>
<td class="pad12 green">
<center>
<table cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<tr>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h2>KORTING</h2>
<table class="discount-s" cellpadding="" cellspacing="0" style="line-height:35px">
<tbody>
<!-- Old Price/New Price 1 // -->
<tr><td>
<strong>Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 1 -->
<!-- Old Price/New Price 2 // -->
<tr><td>
<strong>
Hello world 500g
<span class="oldprice">
22.50
</span>
</strong>
</td>
<td class="discount"><strong>18</strong></td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="discount_decimal"><strong>50</strong></td>
</tr>
<tr>
<td class="discount_dot"><strong>.</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // Old Price/New Price 2 -->
</tbody>
</table>
<!-- Button CTA // -->
<table cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="btn">
<tbody>
<tr>
<td align="center" class="btn_cont pink" valign="middle"><a href="https://www.gezondheidswinkel.nl/" target="_blank">Bekijk actie</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // Button CTA -->
</center>
</td>
</tr>
</table>
</div>
<!-- // END PRODUCT: PRODUCT CONTENT 02 PART 2 -->
</td>
</tr>
</table>
<!-- // END CONTENTBLOK 02 -->
<!-- BEGIN CONTENTBLOK 03 // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="contentbloks" mc:variant="Banner Only">
<tr>
<td valign="top" class="banner-img" width="600">
<img src="https://richterio.nl/gw/promo-image.jpg" width="600" style="max-width:600px;width:600px;margin:0;padding:0;" height="300" class="templateImage" mc:label="Promo_Image" mc:allowdesigner="" mc:allowtext="" mc:hideable mc:edit="promo_image_1">
</td>
</tr>
</table>
<!-- // END CONTENTBLOK 03 -->
</td>
</tr>
Full html e-mail template: https://jsfiddle.net/1bdrzhLf/
Some of the things i tried:
- Collspan="2" on the td containing the banner img
- Content blok content in more tables
- Width="600" instead of width="100%"
Solution
The problem here is that your template is not fully responsive. It still has fixed desktop sizes and layout set in a few places. Mainly:
- Large images (
logo-header.jpgand the twopromo-image.jpg). - The two columns.
The first issue can be solved by setting the three images concerned a style of width:100%; max-width:600px; (instead of width:600px; max-width:600px). I'd also recommend removing the height set so the image can scale homothetically.
The second issue can be solved by adding new styles inside a @media query targeting the .column1 and .column2 classes.
@media (max-width:600px) {
.column1, .column2 { display:block !important; margin:auto !important; }
}
Here’s a full code version based on yours with these few fixes applied: https://parcel.io/e/556fddfc-6a83-4b8f-b3ec-68acf8867fe7?
And here are tests on Email on Acid before and after these fixes:
- How to get ics file to adjust to local time instead of changed time
- Save multiple attachments, in one email, using the subject line, and incrementing that name
- Email Signature Spacing Issue Sending email from Outlook to Gmail
- Schema name for the message date property
- Is there a way to fix the HTML email width on Outlook 2016?
- Using MSAL.js in Outlook Add-in with Office.js authentication
- Microsoft.Office.Core Reference Missing
- How to act upon a "Selection" in Outlook?
- ItemAdd fails when rule copies an item and moves the copy
- Set workbook variable if it is open
- outlook web addin manifest changes not reflecting even after changing the manifest version on localost
- How to use .HTMLBody to hyperlink a cell value?
- Outlook screen flickers when I edit the html body of a mail in mail.open event
- Passing object values between modules in Outlook VBA
- Connecting to OUTLOOK365 from Selenium Java
- Parsing outlook .msg files with python
- Outlook VSTO add-in get complete original email (headers, body, attachments) as sent by SMTP
- Microsoft.Office.Interop.Outlook error in .net core
- How can I extract Outlook message, dragged via OLE drag-and-drop to my window?
- Save MailItem in SharePoint Online using Outlook VBA
- Image style height and width not taken in outlook mails
- How to insert HTML (including images) in an e-mail in Outlook 2016+
- Moving Emails to Outlook Folders with VBA base in excel mapping
- In an Outlook 2013 C# VSTO project, why does the Explorer SelectionChange event fire twice
- Outlook Redemption AddPSTStore Error MAPI_E_INTERFACE_NOT_SUPPORTED
- I want to skip showing the message when calling Office.context.ui.displayDialogAsync() method
- Send mail based on sheet name
- Export all appointments and meetings, including recurring meetings
- How can I send Excel range including header, in table, and email to list?
- MJML : Outlook 1px horizontal when using direction rtl on mj-section