diff --git a/website_mail_snippet_fixed/__openerp__.py b/website_mail_snippet_fixed/__openerp__.py
index 8435d9db..32d906ae 100644
--- a/website_mail_snippet_fixed/__openerp__.py
+++ b/website_mail_snippet_fixed/__openerp__.py
@@ -2,8 +2,8 @@
 # © 2016 Antiun Ingeniería S.L. - Jairo Llopis
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 {
-    "name": "Responsive Layout Snippets for Writing Emails",
-    "summary": "Well... pseudo-responsive (see description)",
+    "name": "Extra Layout Snippets for Writing Emails",
+    "summary": "560px width extra building blocks",
     "version": "8.0.1.0.0",
     "category": "Marketing",
     "website": "http://www.antiun.com",
diff --git a/website_mail_snippet_fixed/views/snippet_1_col.xml b/website_mail_snippet_fixed/views/snippet_1_col.xml
index 7fed6a93..35900a19 100644
--- a/website_mail_snippet_fixed/views/snippet_1_col.xml
+++ b/website_mail_snippet_fixed/views/snippet_1_col.xml
@@ -13,10 +13,7 @@
             <t t-set="title">Big image + Text + Button (1 column)</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
-                <tr>
-                    <td><a href="#" target="_blank"><img src="http://placehold.it/570x200/333333/ffffff?text=width 570px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 100%; max-width: 570px; min-width:285px;" border="0"/> </a></td>
+                    <td><a href="#" target="_blank"><img src="http://placehold.it/560x200/333333/ffffff?text=width 560px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 560px;" border="0"/> </a></td>
                 </tr>
                 <tr>
                     <td style="padding:0 20px;">
diff --git a/website_mail_snippet_fixed/views/snippet_2_cols.xml b/website_mail_snippet_fixed/views/snippet_2_cols.xml
index 5b2ba139..b0da37ea 100644
--- a/website_mail_snippet_fixed/views/snippet_2_cols.xml
+++ b/website_mail_snippet_fixed/views/snippet_2_cols.xml
@@ -12,20 +12,17 @@
             <t t-set="image" t-value="'snippet_2_cols'"/>
             <t t-set="title">Image + Text + Button (2 columns)</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->
-                        <table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
+                                    <td style="padding: 20px 10px 20px 20px;">
+                                        <table style="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/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 245px;" width="245" border="0"/></a></td>
+                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/250x200/333333/ffffff?text=width 250px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 250px;" width="250" border="0"/></a></td>
                                                 </tr>
                                                 <tr>
                                                     <td style="padding:0;">
@@ -68,14 +65,14 @@
                         </table>
 
                         <!-- RIGHT COLUMN -->
-                        <table style="width: 50%;  min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
+                                    <td style="padding: 20px 20px 20px 10px;">
+                                        <table style="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/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 50% width: 245px;" width="245" border="0"/></a></td>
+                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/250x200/333333/ffffff?text=width 250px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 50% width: 250px;" width="250" border="0"/></a></td>
                                                 </tr>
                                                 <tr>
                                                     <td style="padding:0;">
diff --git a/website_mail_snippet_fixed/views/snippet_3_cols.xml b/website_mail_snippet_fixed/views/snippet_3_cols.xml
index 90cbf4bb..e71a1ff1 100644
--- a/website_mail_snippet_fixed/views/snippet_3_cols.xml
+++ b/website_mail_snippet_fixed/views/snippet_3_cols.xml
@@ -13,19 +13,19 @@
             <t t-set="title">Image + Text + Button (3 columns)</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
+                    <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 style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
+                                    <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 width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:150px;" width="150" border="0"/></a></td>
+                                                    <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;">
@@ -68,14 +68,14 @@
                         </table>
 
                         <!-- SECOND COLUMN -->
-                        <table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
+                                    <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 width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:150px;" width="150" border="0"/></a></td>
+                                                    <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;">
@@ -119,14 +119,14 @@
 
                         <!-- THIRD COLUMN -->
 
-                        <table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF" width="150">
+                                    <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 width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:150px;" width="150" border="0"/></a></td>
+                                                    <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;">
diff --git a/website_mail_snippet_fixed/views/snippet_hr.xml b/website_mail_snippet_fixed/views/snippet_hr.xml
index f5cffafe..079a061f 100644
--- a/website_mail_snippet_fixed/views/snippet_hr.xml
+++ b/website_mail_snippet_fixed/views/snippet_hr.xml
@@ -25,13 +25,16 @@
             <t t-set="title">Horizontal Separator</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#ECECEC" height="10"/>
+                    <td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
                 </tr>
                 <tr>
-                    <td bgcolor="#00B518"
+                    <td style="background-color: #00B518;"
                         height="5"
                         class="bg_color_picker vertical_resizable"/>
                 </tr>
+                <tr>
+                    <td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
+                </tr>
             </tbody>
         </t>
     </xpath>
diff --git a/website_mail_snippet_fixed/views/snippet_img_text.xml b/website_mail_snippet_fixed/views/snippet_img_text.xml
index 5f90495e..b6c8fae9 100644
--- a/website_mail_snippet_fixed/views/snippet_img_text.xml
+++ b/website_mail_snippet_fixed/views/snippet_img_text.xml
@@ -13,19 +13,19 @@
             <t t-set="title">Left Image, Right Text + Button</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
+                    <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: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
                             <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/245x150/333333/ffffff?text=width 245px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; min-width:245px; max-width: none; height:auto;" border="0"/></a></td>
+                                                    <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>
                                                 </tr>
                                             </tbody>
                                         </table>
@@ -35,7 +35,7 @@
                         </table>
 
                         <!-- RIGHT COLUMN -->
-                        <table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
+                        <table style="min-width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
                                     <td style="padding: 20px;">
diff --git a/website_mail_snippet_fixed/views/snippet_text_img.xml b/website_mail_snippet_fixed/views/snippet_text_img.xml
index f67121ed..e71f75b4 100644
--- a/website_mail_snippet_fixed/views/snippet_text_img.xml
+++ b/website_mail_snippet_fixed/views/snippet_text_img.xml
@@ -13,12 +13,12 @@
             <t t-set="title">Left Text and Button, Right Image</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
+                    <td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
                 </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->
-                        <table border="0" cellpadding="0" cellspacing="0" align="left" width="50%">
+                        <table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
                             <tbody>
                                 <tr>
                                     <td style="padding: 20px;">
@@ -57,14 +57,14 @@
                         </table>
 
                         <!-- RIGHT COLUMN -->
-                        <table border="0" cellpadding="0" cellspacing="0" align="left" width="50%">
+                        <table style="min-width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
                             <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/245x150/333333/ffffff?text=width 245px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; min-width:245px;" border="0"/></a></td>
+                                                    <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>
diff --git a/website_mail_snippet_fixed/views/templates.xml b/website_mail_snippet_fixed/views/templates.xml
index fed9f1fd..6f4f9974 100644
--- a/website_mail_snippet_fixed/views/templates.xml
+++ b/website_mail_snippet_fixed/views/templates.xml
@@ -19,11 +19,11 @@
             class="oe_snippet_body"
             style="padding:0px; width:100%; background-color:#ececec; color:rgb(0,0,0); line-height:20px; font-family:Arial,sans-serif; font-size:9pt">
             <table
-                style="width: 100%; max-width: 570px; border-collapse: collapse; background: inherit; color: inherit; background: #FFFFFF"
+                style="width: 560px; border-collapse: collapse; background: inherit; color: inherit; background: #FFFFFF"
                 cellpadding="0"
                 cellspacing="0"
                 align="center"
-                bgcolor="#FFFFFF">
+                class="bg_color_picker">
                 <t t-raw="0"/>
             </table>
         </div>