From 25b61bd36f28ebcaf6d2ec0fc5c8074edc104fd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B3mez-Zurita?= <danielgz@antiun.com>
Date: Tue, 23 Feb 2016 15:17:33 +0100
Subject: [PATCH] 3 columns, Img+Text and Text + Img Fixed

---
 .../views/snippet_3_cols.xml                  | 284 +++++++++---------
 .../views/snippet_img_text.xml                |  59 ++--
 .../views/snippet_text_img.xml                |  75 +++--
 3 files changed, 223 insertions(+), 195 deletions(-)

diff --git a/website_mail_snippet_fixed/views/snippet_3_cols.xml b/website_mail_snippet_fixed/views/snippet_3_cols.xml
index 0c57d2c7..a74fe745 100644
--- a/website_mail_snippet_fixed/views/snippet_3_cols.xml
+++ b/website_mail_snippet_fixed/views/snippet_3_cols.xml
@@ -8,150 +8,160 @@
 <template id="snippet_3_cols"
           inherit_id="560px_section">
     <xpath expr=".">
-        <t t-call="website_mail_snippet_fixed.snippet">
-            <t t-set="image" t-value="'snippet_3_cols'"/>
-            <t t-set="title">Image + Text + Button (3 columns)</t>
-            <tbody>
-                <tr>
-                    <td align="left" colspan="3" style="font-size: 11pt; font-family: Arial, sans-serif; font-weight: bold; color: #000; padding: 20px 10px 0 20px;">Title</td>
-                </tr>
-                <tr>
-                    <td style="padding: 0;" valign="top">
-                        <!-- FIRST COLUMN -->
-                        <table border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 10px 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center"  class="bg_color_picker">
-                                            <tbody>
-                                                <tr>
-                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/160x160/333333/ffffff?text=width 160px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:160px;" width="160" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="padding: 25px 0px;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+        <t t-call="website_mail_snippet_responsive.snippet">
+        <t t-set="image" t-value="'snippet_3_cols'"/>
+        <t t-set="title">Image + Text + Button (3 columns)</t>
+        <tbody>
+            <tr>
+                <td align="left" colspan="3" style="font-size: 11pt; font-family: Arial, sans-serif; font-weight: bold; color: #000; padding: 20px 10px 0 20px;">Title</td>
+            </tr>
+            <tr><!-- FIRST COLUMN -->
+                <td style="padding: 0;" valign="top">
+                    <table align="left" border="0" cellpadding="0" cellspacing="0">
+                     <tbody>
+                       <tr>
+                        <td style="padding: 20px 10px 20px 20px;">
+                            <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="160">
+                                <tbody>
+                                    <tr>
+                                        <td><a href="#" target="_blank"><img src="http://placehold.it/160x160/aaaaaa/ffffff?text=width%20160px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;width: 100%; width:160px;" border="0" width="160"></a></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0;">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
+                                                    </tr>
 
-                        <!-- SECOND COLUMN -->
-                        <table border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 10px 20px 10px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center"  class="bg_color_picker">
-                                            <tbody>
-                                                <tr>
-                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/160x160/333333/ffffff?text=width 160px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:160px;" width="160" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="padding: 25px 0px;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                                    <tr>
+                                                        <td align="left" style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">
 
-                        <!-- THIRD COLUMN -->
+                                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
+                                                        </tr>
 
-                        <table border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 20px 20px 10px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center"  class="bg_color_picker" width="150">
-                                            <tbody>
-                                                <tr>
-                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/160x160/333333/ffffff?text=width 160px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:160px;" width="160" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
+                                                        <tr>
+                                                            <td align="left">
+                                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                                    <tbody>
+                                                                        <tr>
+                                                                            <td style="padding: 25px 0px;" align="left">
+                                                                                <table border="0" cellpadding="0" cellspacing="0">
+                                                                                    <tbody>
+                                                                                        <tr>
+                                                                                            <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                                        </tr>
+                                                                                    </tbody>
+                                                                                </table>
+                                                                            </td>
+                                                                        </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <!-- SECOND COLUMN -->
+            <td style="padding: 0;" valign="top">
+                <table align="left" border="0" cellpadding="0" cellspacing="0">
+                    <tbody>
+                        <tr>
+                            <td style="padding: 20px 10px 20px 10px;">
+                                <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="160">
+                                    <tbody>
+                                        <tr>
+                                            <td><a href="#" target="_blank"><img src="http://placehold.it/160x160/aaaaaa/ffffff?text=width%20160px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;width: 100%; width:160px;" border="0" width="160"></a></td>
+                                        </tr>
+                                        <tr>
+                                            <td style="padding:0;">
+                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                    <tbody>
+                                                        <tr>
+                                                            <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td align="left" style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">
+
+                                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
+                                                            </tr>
+                                                            <tr>
+                                                                <td align="left">
+                                                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                                        <tbody>
+                                                                            <tr>
+                                                                                <td style="padding: 25px 0px;" align="left">
+                                                                                    <table border="0" cellpadding="0" cellspacing="0">
+                                                                                        <tbody>
+                                                                                            <tr>
+                                                                                                <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                                            </tr>
+                                                                                        </tbody>
+                                                                                    </table>
+                                                                                </td>
+                                                                            </tr>
+                                                                        </tbody>
+                                                                    </table>
+                                                                </td>
+                                                            </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+                <!-- THIRD COLUMN -->
+                <td style="padding: 0;" valign="top">
+                    <table align="left" border="0" cellpadding="0" cellspacing="0">
+                        <tbody>
+                            <tr>
+                                <td style="padding: 20px 20px 20px 10px;">
+                                    <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="160">
+                                        <tbody>
+                                            <tr>
+                                                <td><a href="#" target="_blank"><img src="http://placehold.it/160x160/aaaaaa/ffffff?text=width%20160px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;width: 100%; width:160px;" border="0" width="160"></a></td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding:0;">
+                                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                        <tbody>
+                                                            <tr>
+                                                                <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
+                                                            </tr>
+
+                                                            <tr>
+                                                                <td align="left" style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">
+
+                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
                                                                 </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
+
                                                                 <tr>
-                                                                    <td style="padding: 25px 0px;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                                    <td align="left">
+                                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                             <tbody>
                                                                                 <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
+                                                                                    <td style="padding: 25px 0px;" align="left">
+                                                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                                                            <tbody>
+                                                                                                <tr>
+                                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                                                </tr>
+                                                                                            </tbody>
+                                                                                        </table>
+                                                                                    </td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>
diff --git a/website_mail_snippet_fixed/views/snippet_img_text.xml b/website_mail_snippet_fixed/views/snippet_img_text.xml
index 7881ad6d..ea538870 100644
--- a/website_mail_snippet_fixed/views/snippet_img_text.xml
+++ b/website_mail_snippet_fixed/views/snippet_img_text.xml
@@ -8,55 +8,64 @@
 <template id="snippet_img_text"
           inherit_id="560px_section">
     <xpath expr=".">
-        <t t-call="website_mail_snippet_fixed.snippet">
+        <t t-call="website_mail_snippet_responsive.snippet">
             <t t-set="image" t-value="'snippet_img_text'"/>
             <t t-set="title">Left Image, Right Text + Button</t>
             <tbody>
                 <tr>
-                    <td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
-                </tr>
-                <tr>
-                    <td style="padding: 0;" valign="top">
-                        <!-- LEFT COLUMN -->
-                        <table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                    <td style="padding: 0;" valign="top"><!-- LEFT COLUMN -->
+                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px;">
-                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                    <td style="padding: 20px 10px 20px 20px;">
+                                        <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
                                             <tbody>
                                                 <tr>
-                                                    <td align="center" valign="middle"><a href="#" target="_blank"><img src="http://placehold.it/240x150/333333/ffffff?text=width 240px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; width:240px; height:auto;" border="0"/></a></td>
+                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/250x200/aaaaaa/ffffff?text=width%20250px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 250px;" border="0" width="250"></a></td>
                                                 </tr>
+
                                             </tbody>
                                         </table>
                                     </td>
                                 </tr>
                             </tbody>
                         </table>
-
-                        <!-- RIGHT COLUMN -->
-                        <table style="min-width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                    </td>
+                    <!-- RIGHT COLUMN -->
+                    <td>
+                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px;">
-                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                    <td style="padding: 20px 20px 20px 10px;">
+                                        <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
                                             <tbody>
+
                                                 <tr>
-                                                    <td style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" align="left">News Item</td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #000000; font-size: 9pt; line-height: 20px;" align="left">Integer ut tempor lectus. Vivamus at gravida arcu.</td>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
+                                                    <td style="padding:0;">
                                                         <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td style="padding: 25px 0 0 0;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 10px;" align="left">News Item</td>
+                                                                </tr>
+
+                                                                <tr>
+                                                                    <td align="left" style="padding: 10px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+                                                                </tr>
+
+                                                                <tr>
+                                                                    <td align="left">
+                                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                             <tbody>
                                                                                 <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
+                                                                                    <td style="padding: 25px 0;" align="left">
+                                                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                                                            <tbody>
+                                                                                                <tr>
+                                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                                                </tr>
+                                                                                            </tbody>
+                                                                                        </table>
+                                                                                    </td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>
diff --git a/website_mail_snippet_fixed/views/snippet_text_img.xml b/website_mail_snippet_fixed/views/snippet_text_img.xml
index 3ece735d..9342f2a2 100644
--- a/website_mail_snippet_fixed/views/snippet_text_img.xml
+++ b/website_mail_snippet_fixed/views/snippet_text_img.xml
@@ -8,38 +8,45 @@
 <template id="snippet_text_img"
           inherit_id="560px_section">
     <xpath expr=".">
-        <t t-call="website_mail_snippet_fixed.snippet">
+        <t t-call="website_mail_snippet_responsive.snippet">
             <t t-set="image" t-value="'snippet_text_img'"/>
             <t t-set="title">Left Text and Button, Right Image</t>
             <tbody>
                 <tr>
-                    <td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
-                </tr>
-                <tr>
-                    <td style="padding: 0;" valign="top">
-                        <!-- LEFT COLUMN -->
-                        <table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                    <td style="padding: 0;" valign="top"><!-- LEFT COLUMN -->
+                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px;">
-                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                    <td style="padding: 20px 10px 20px 20px;">
+                                        <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
                                             <tbody>
+
                                                 <tr>
-                                                    <td style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" align="left">News Item</td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #000000; font-size: 9pt; line-height: 20px;" align="left">Integer ut tempor lectus. Vivamus at gravida arcu.</td>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
+                                                    <td style="padding:0;">
                                                         <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td style="padding: 25px 0 0 0;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 10px;" align="left">News Item</td>
+                                                                </tr>
+
+                                                                <tr>
+                                                                    <td align="left" style="padding: 10px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+                                                                </tr>
+
+                                                                <tr>
+                                                                    <td align="left">
+                                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                             <tbody>
                                                                                 <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
+                                                                                    <td style="padding: 25px 0;" align="left">
+                                                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                                                            <tbody>
+                                                                                                <tr>
+                                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                                                </tr>
+                                                                                            </tbody>
+                                                                                        </table>
+                                                                                    </td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>
@@ -55,21 +62,23 @@
                                 </tr>
                             </tbody>
                         </table>
-
-                        <!-- RIGHT COLUMN -->
-                        <table style="min-width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                    </td>
+                    <!-- RIGHT COLUMN -->
+                    <td>
+                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
                             <tbody>
-                                <tr>
-                                    <td style="padding: 20px;">
-                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                            <tbody>
-                                                <tr>
-                                                    <td align="center" valign="middle"><a href="#" target="_blank"><img src="http://placehold.it/240x150/333333/ffffff?text=width 240px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; width:240px;" border="0"/></a></td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
+                                <tr><td style="padding: 20px 20px 20px 10px;">
+                                    <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
+                                        <tbody>
+                                            <tr>
+                                                <td><a href="#" target="_blank"><img src="http://placehold.it/250x200/aaaaaa/ffffff?text=width%20250px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 250px;" border="0" width="250"></a></td>
+                                            </tr>
+
+                                        </tbody>
+                                    </table>
+                                </td></tr>
+
+
                             </tbody>
                         </table>
                     </td>