diff --git a/addons/mail/models/mail_message.py b/addons/mail/models/mail_message.py
index 522400fd495..816f15a5b24 100644
--- a/addons/mail/models/mail_message.py
+++ b/addons/mail/models/mail_message.py
@@ -40,7 +40,7 @@ class Message(models.Model):
     # content
     subject = fields.Char('Subject')
     date = fields.Datetime('Date', default=fields.Datetime.now)
-    body = fields.Html('Contents', default='', sanitize_style=True, strip_classes=True)
+    body = fields.Html('Contents', default='', sanitize_style=True)
     attachment_ids = fields.Many2many(
         'ir.attachment', 'message_attachment_rel',
         'message_id', 'attachment_id',
diff --git a/addons/mail/models/mail_thread.py b/addons/mail/models/mail_thread.py
index fe08600259d..55e28e5c196 100644
--- a/addons/mail/models/mail_thread.py
+++ b/addons/mail/models/mail_thread.py
@@ -1567,6 +1567,8 @@ class MailThread(models.AbstractModel):
                         body = html
                     else:
                         body = tools.append_content_to_html(body, html, plaintext=False)
+                    # we only strip_classes here everything else will be done in by html field of mail.message
+                    body = tools.html_sanitize(body, sanitize_tags=False, strip_classes=True)
                 # 4) Anything else -> attachment
                 else:
                     attachments.append(self._Attachment(filename or 'attachment', part.get_payload(decode=True), {}))
diff --git a/addons/mass_mailing/__manifest__.py b/addons/mass_mailing/__manifest__.py
index 5f820bbf30f..78941fc1f30 100644
--- a/addons/mass_mailing/__manifest__.py
+++ b/addons/mass_mailing/__manifest__.py
@@ -31,6 +31,7 @@
         'views/mass_mailing_views.xml',
         'views/res_config_settings_views.xml',
         'security/ir.model.access.csv',
+        'views/mass_mailing_layout.xml',
         'views/editor_field_html.xml',
         'views/themes_templates.xml',
         'views/snippets_themes.xml',
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index 704ea7656d7..96d6a61e805 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -162,7 +162,7 @@ td {
     }
 }
 
-.o_mail_block_steps {
+.o_mail_block_steps .o_mail_snippet_general{
     background-color: $o-mm-def-color-alpha;
 }
 
@@ -306,20 +306,6 @@ td {
     border-collapse:separate;
 }
 
-// ===== Mobile =====
-@media screen and (max-width: $o-mm-def-body-bobile) {
-    .o_mail_col_mv {
-        display: block!important;
-        max-width: $o-mm-def-body-bobile!important;
-        width: 100%!important;
-    }
-
-    .o_mail_table_styles {
-        max-width: $o-mm-def-body-bobile!important;
-        width: 100%!important;
-    }
-}
-
 // Compatibility: mb/mt classes on <td/> elements were interpreted as paddings
 // instead of margins before the introduction of pb/pt classes. As thoses mb/mt
 // classes may remain on clients' templates, <td/> are forced to 0 margin to
diff --git a/addons/mass_mailing/tests/__init__.py b/addons/mass_mailing/tests/__init__.py
index b02648f85eb..f228b7d5635 100644
--- a/addons/mass_mailing/tests/__init__.py
+++ b/addons/mass_mailing/tests/__init__.py
@@ -2,3 +2,4 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 from . import test_mass_mailing_list_merge
+from . import test_mass_mailing_responsive
diff --git a/addons/mass_mailing/tests/test_mass_mailing_responsive.py b/addons/mass_mailing/tests/test_mass_mailing_responsive.py
new file mode 100644
index 00000000000..4a186ae652c
--- /dev/null
+++ b/addons/mass_mailing/tests/test_mass_mailing_responsive.py
@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo.tests import common
+
+
+class TestResponsiveMail(common.SavepointCase):
+
+    def test_responsive_mail(self):
+        """
+            Testing mail mailing responsive mail body
+        """
+        test_record = self.env['res.partner'].create({'name': 'Mass Mail Partner'})
+        mass_mail_record = self.env.ref('mass_mailing.mass_mail_2')
+
+        composer = self.env['mail.compose.message'].sudo().with_context({
+            'default_composition_mode': 'mass_mail',
+            'default_model': 'res.partner',
+            'default_res_id': test_record.id,
+        }).create({
+            'subject': 'Mass Mail Responsive',
+            'body': 'I am Responsive body',
+            'mass_mailing_id': mass_mail_record.id
+        })
+
+        mail_values = composer.get_mail_values([test_record.id])
+        body_html = str(mail_values[test_record.id]['body_html'])
+
+        self.assertIn('<!DOCTYPE html>', body_html)
+        self.assertIn('<head>', body_html)
+        self.assertIn('viewport', body_html)
+        self.assertIn('@media', body_html)
+        self.assertIn('I am Responsive body', body_html)
diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
index a962647670e..8a1a8845aa8 100644
--- a/addons/mass_mailing/views/editor_field_html.xml
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -3,6 +3,7 @@
 <template id="assets_mail_themes">
     <link rel="stylesheet" type="text/scss" href="/mass_mailing/static/src/scss/themes/theme_basic.scss"/>
     <link rel="stylesheet" type="text/scss" href="/mass_mailing/static/src/scss/themes/theme_default.scss"/>
+    <t t-call="mass_mailing.mass_mailing_mail_style"/>
 </template>
 
 <template id="FieldTextHtmlInline" name="Editor layout">
diff --git a/addons/mass_mailing/views/mass_mailing_layout.xml b/addons/mass_mailing/views/mass_mailing_layout.xml
new file mode 100644
index 00000000000..eae060d21ea
--- /dev/null
+++ b/addons/mass_mailing/views/mass_mailing_layout.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="mass_mailing_mail_style">
+        <style>
+            @media screen and (max-width: 768px) {
+                .o_mail_col_mv {
+                    display: block !important;
+                    width: auto !important;
+                }
+                .o_mail_table_styles {
+                    width: 100% !important;
+                }
+                .o_mail_col_container {
+                    margin: 0px 0px 10px 0px !important;
+                }
+            }
+        </style>
+    </template>
+
+    <!-- Reference: https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch -->
+    <template id="mass_mailing_mail_layout">
+        &lt;!DOCTYPE html&gt;
+        <html xmlns="http://www.w3.org/1999/xhtml">
+            <head>
+                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+                <meta name="format-detection" content="telephone=no"/>
+                <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
+                <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
+
+                <t t-call="mass_mailing.mass_mailing_mail_style"/>
+            </head>
+            <body>
+                <t t-raw="body"/>
+            </body>
+        </html>
+    </template>
+</odoo>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 2f446c55d19..b0b1cf6398e 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -121,13 +121,13 @@
         <div class="o_mail_snippet_general">
             <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles o_mail_h_padding">
                 <tr>
-                    <td width="20%"/>
-                    <td valign="center" width="60%" class="text-center o_mail_v_padding">
+                    <td width="35%"/>
+                    <td valign="center" width="30%" class="text-center o_mail_v_padding">
                         <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
                             <img border="0" src="/mass_mailing/static/src/img/theme_basic/s_default_image_logo.png" style="height:auto;max-width:400px;width:auto" alt="Your Logo" />
                         </a>
                     </td>
-                    <td width="20%" style="text-align:right"/>
+                    <td width="35%" style="text-align:right"/>
                 </tr>
             </table>
         </div>
@@ -140,7 +140,7 @@
             <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
                 <tbody>
                     <tr>
-                        <td width="100%" valign="top" class="o_mail_full_width_padding">
+                        <td width="100%" valign="top" class="o_mail_full_width_padding o_mail_no_colorpicker">
                             <a href="#">
                                 <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_banner.jpg" class="d-block mx-auto" alt="Your Banner Image" />
                             </a>
@@ -158,7 +158,7 @@
             <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
                 <tbody>
                     <tr>
-                        <td width="100%" class="o_mail_h_padding o_mail_v_padding">
+                        <td width="100%" class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
                             <h2 class="mt0">Thank you for joining us!</h2>
                             <p>We want to take this opportunity to welcome you to our ever-growing community!<br/></p>
                             <p>Your platform is ready for work. It will help you reduce the costs of digital signage, attract new customers and increase sales.</p>
@@ -188,7 +188,7 @@
             <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
                 <tbody>
                     <tr>
-                        <td width="100%" class="o_mail_h_padding o_mail_v_padding">
+                        <td width="100%" class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
                             <p> The open source model of Odoo has allowed us to leverage thousands of developers and
                                 business experts to build hundreds of apps in just a few years.</p>
                             <p> With strong technical foundations, Odoo's framework is unique.
@@ -211,7 +211,7 @@
             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
                 <tbody>
                     <tr>
-                        <td class="o_mail_h_padding o_mail_v_padding">
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
                             <h2 class="o_mail_no_margin">Check this out!</h2>
                             <p class="o_mail_no_margin">Apps That Help You Grow Your Business!</p>
                         </td>
@@ -237,47 +237,47 @@
                                         </th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-gray-lighter">
+                                <tbody>
                                     <tr>
-                                        <td class="text-center o_mail_col_mv">
+                                        <td class="text-center o_mail_col_mv bg-gray-lighter">
                                             <p class="o_mail_display_coupon text-center" style="margin-top:10px;">$8</p>
                                             <small>user / month (billed annually)</small>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
                                             <div class="separator"></div>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p>Basic features</p>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p>Basic management</p>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p>No customization</p>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p>No support</p>
                                         </td>
                                     </tr>
                                 </tbody>
-                                <tfoot class="bg-gray-lighter">
+                                <tfoot>
                                     <tr>
-                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
                                             <div class="separator"></div>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv" style="padding-bottom: 20px;">
+                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv bg-gray-lighter" style="padding-bottom: 20px;">
                                             <a role="button" href="#" class="btn btn-block btn-primary">More</a>
                                         </td>
                                     </tr>
@@ -293,47 +293,47 @@
                                         </th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-gray-lighter">
+                                <tbody>
                                     <tr>
-                                        <td class="text-center o_mail_col_mv">
+                                        <td class="text-center o_mail_col_mv bg-gray-lighter">
                                             <p class="o_mail_display_coupon text-center" style="margin-top:10px;">$18</p>
                                             <small>user / month (billed annually)</small>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
                                             <div class="separator"></div>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p><strong>Advanced</strong> features</p>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p><strong>Total</strong> management</p>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p><strong>Fully customizable</strong></p>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td class="o_mail_col_mv">
+                                        <td class="o_mail_col_mv bg-gray-lighter">
                                             <p><strong>24/7 Support</strong></p>
                                         </td>
                                     </tr>
                                 </tbody>
-                                <tfoot class="bg-gray-lighter">
+                                <tfoot>
                                     <tr>
-                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
                                             <div class="separator"></div>
                                         </td>
                                     </tr>
                                     <tr>
-                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv" style="padding-bottom: 20px;">
+                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv bg-gray-lighter" style="padding-bottom: 20px;">
                                             <a role="button" href="#" class="btn btn-block btn-primary">More</a>
                                         </td>
                                     </tr>
@@ -353,8 +353,8 @@
             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
                 <tbody>
                     <tr>
-                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
-                            <div class="o_mail_col_container">
+                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
                                 <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_1.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column title</h4>
                                 <p class="text-center o_mail_no_margin">
@@ -368,8 +368,8 @@
                             </div>
                         </td>
 
-                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
-                            <div class="o_mail_col_container">
+                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
                                 <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_2.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column title</h4>
                                 <p class="text-center o_mail_no_margin">
@@ -395,8 +395,8 @@
             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
                 <tbody>
                     <tr>
-                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
-                            <div class="o_mail_col_container">
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
                                 <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_1.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column Title</h4>
                                 <p class="text-center o_mail_no_margin">
@@ -408,8 +408,8 @@
                             </div>
                         </td>
 
-                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
-                            <div class="o_mail_col_container">
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
                                 <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_2.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column Title</h4>
                                 <p class="text-center o_mail_no_margin">
@@ -421,8 +421,8 @@
                             </div>
                         </td>
 
-                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
-                            <div class="o_mail_col_container">
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
                                 <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_3.jpg" class="d-block mx-auto" alt="Your Picture" />
                                 <h4 class="text-center">Column Title</h4>
                                 <p class="text-center o_mail_no_margin">
@@ -469,14 +469,14 @@
             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
                 <tbody>
                     <tr>
-                        <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mvo_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                        <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
                             <h3>A unique value</h3>
                             <p class="o_mail_no_margin" style="text-align:justify;">The open source model of Odoo has allowed us to leverage thousands of developers and business experts to build hundreds of apps in just a few years.</p>
                             <div class="text-center" style="margin-top:15px;">
                                 <a role="button" href="#" class="btn btn-link">Read More...</a>
                             </div>
                         </td>
-                        <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                        <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
                             <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_text_image.jpg" class="d-block mx-auto" alt="Your Picture" />
                         </td>
                     </tr>
@@ -489,16 +489,20 @@
 <template id="s_mail_block_image" name="Image">
     <div class="o_mail_block_image">
         <div class="o_mail_snippet_general">
-            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_h_padding">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
                 <tbody>
                     <tr>
-                        <td width="100%" align="center" style="text-align:center" class="">
+                        <td width="100%" align="center" style="text-align:center" class="o_mail_h_padding">
                             <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image.jpg" class="d-block mx-auto" alt="Your Picture" />
                         </td>
                     </tr>
                     <tr>
-                        <td width="100%" class="o_mail_col_mv o_mail_v_padding bg-beta">
-                            <p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p>
+                        <td width="100%" align="center" style="text-align:center" class="o_mail_h_padding">
+                            <table>
+                                <td class="bg-beta o_mail_v_padding">
+                                    <p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p>
+                                </td>
+                            </table>
                         </td>
                     </tr>
                 </tbody>
@@ -513,7 +517,7 @@
             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:100%;" class="o_mail_v_padding">
+                        <td valign="top" style="width:100%;" class="o_mail_v_padding o_mail_no_colorpicker">
                             <div style="width:100%;" class="separator"></div>
                         </td>
                     </tr>
@@ -534,7 +538,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;">
+                        <td class="text-center o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;">
                             &amp;nbsp;
                             <a role="button" href="#" class="btn btn-primary">My Account</a>
                             &amp;nbsp;
@@ -574,7 +578,7 @@
                                 Use This Promo Code BEFORE 1st of August
                             </p>
                             <p class="o_mail_h_padding text-center">
-                                <small>CODE</small>:   <strong class="o_code h3">45A9E77DGW8455</strong>
+                                <span style="line-height: 30px;"><small>CODE: </small></span><strong class="o_code h3">45A9E77DGW8455</strong>
                             </p>
                             <p class="text-center">
                                 and save $20 on your next order!
@@ -583,7 +587,7 @@
                     </tr>
                     <tr>
                         <td class="mb16 mt16 text-center">
-                            <a role="button" class="btn btn-primary">Use now</a>
+                            <a role="button" href="#" class="btn btn-primary">Use now</a>
                         </td>
                     </tr>
                 </tbody>
@@ -599,7 +603,7 @@
                 <tbody>
                     <tr>
                         <td class="o_mail_h_padding o_mail_v_padding text-center o_mail_col_mv" width="250">
-                            <table>
+                            <table class="o_mail_table_styles">
                                 <tr>
                                     <td>
                                         <p class="o_mail_display_coupon text-beta text-center o_mail_no_margin" style="font-weight:800;">20%</p>
@@ -634,9 +638,11 @@
         <div class="o_mail_snippet_general">
             <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles">
                 <tr>
-                    <td style="width:25%;min-height: 150px;vertical-align:middle;" class="o_mail_h_padding o_mail_v_padding bg-beta text-center o_mail_col_mv">
-                        <h3 class="o_mail_no_margin">21 Jul</h3>
-                        <p class="o_mail_no_margin">ALL DAY</p>
+                    <td style="width:25%;min-height: 150px;vertical-align:middle;" class="bg-beta text-center o_mail_col_mv">
+                        <div class="o_mail_h_padding o_mail_v_padding">
+                            <h3 class="o_mail_no_margin">21 Jul</h3>
+                            <p class="o_mail_no_margin">ALL DAY</p>
+                        </div>
                     </td>
                     <td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv">
                         <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_event.jpg" class="d-block mx-auto" alt="Your Picture" />
@@ -667,7 +673,7 @@
                 <tbody>
                     <tr>
                         <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
-                            <table class="o_mail_table_styles">
+                            <table align="center">
                                 <tr>
                                     <td rowspan="2" class="text-right">
                                         &amp;nbsp;
@@ -682,7 +688,7 @@
                             </table>
                         </td>
                         <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
-                            <table class="o_mail_table_styles">
+                            <table align="center">
                                 <tr>
                                     <td rowspan="2" class="text-right">
                                         &amp;nbsp;
@@ -697,7 +703,7 @@
                             </table>
                         </td>
                         <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
-                            <table class="o_mail_table_styles">
+                            <table align="center">
                                 <tr>
                                     <td rowspan="2" class="text-right">
                                         &amp;nbsp;
diff --git a/addons/mass_mailing/wizard/mail_compose_message.py b/addons/mass_mailing/wizard/mail_compose_message.py
index 8f28f6b5244..12d167a70ee 100644
--- a/addons/mass_mailing/wizard/mail_compose_message.py
+++ b/addons/mass_mailing/wizard/mail_compose_message.py
@@ -57,6 +57,7 @@ class MailComposeMessage(models.TransientModel):
 
             blacklist = self._context.get('mass_mailing_blacklist')
             seen_list = self._context.get('mass_mailing_seen_list')
+            mass_mail_layout = self.env.ref('mass_mailing.mass_mailing_mail_layout', raise_if_not_found=False)
             for res_id in res_ids:
                 mail_values = res[res_id]
                 if mail_values.get('email_to'):
@@ -74,6 +75,8 @@ class MailComposeMessage(models.TransientModel):
                     'res_id': res_id,
                     'mass_mailing_id': mass_mailing.id
                 }
+                if mail_values.get('body_html') and mass_mail_layout:
+                    mail_values['body_html'] = mass_mail_layout.render({'body': mail_values['body_html']}, engine='ir.qweb', minimal_qcontext=True)
                 # propagate exception state to stat when still-born
                 if mail_values.get('state') == 'cancel':
                     stat_vals['exception'] = fields.Datetime.now()
diff --git a/addons/mass_mailing/wizard/test_mailing.py b/addons/mass_mailing/wizard/test_mailing.py
index 7fafbb920a8..8389ce269ef 100644
--- a/addons/mass_mailing/wizard/test_mailing.py
+++ b/addons/mass_mailing/wizard/test_mailing.py
@@ -18,15 +18,17 @@ class TestMassMailing(models.TransientModel):
         mails = self.env['mail.mail']
         mailing = self.mass_mailing_id
         test_emails = tools.email_split(self.email_to)
+        mass_mail_layout = self.env.ref('mass_mailing.mass_mailing_mail_layout')
         for test_mail in test_emails:
             # Convert links in absolute URLs before the application of the shortener
             mailing.write({'body_html': self.env['mail.thread']._replace_local_links(mailing.body_html)})
+            body = tools.html_sanitize(mailing.body_html, sanitize_attributes=True, sanitize_style=True)
             mail_values = {
                 'email_from': mailing.email_from,
                 'reply_to': mailing.reply_to,
                 'email_to': test_mail,
                 'subject': mailing.name,
-                'body_html': tools.html_sanitize(mailing.body_html, sanitize_attributes=True, sanitize_style=True, strip_classes=True),
+                'body_html': mass_mail_layout.render({'body': body}, engine='ir.qweb', minimal_qcontext=True),
                 'notification': True,
                 'mailing_id': mailing.id,
                 'attachment_ids': [(4, attachment.id) for attachment in mailing.attachment_ids],
diff --git a/addons/web_editor/static/src/js/editor/transcoder.js b/addons/web_editor/static/src/js/editor/transcoder.js
index 84fe3cf8c93..45962e0df8c 100644
--- a/addons/web_editor/static/src/js/editor/transcoder.js
+++ b/addons/web_editor/static/src/js/editor/transcoder.js
@@ -37,7 +37,6 @@ function getMatchedCSSRules(a) {
                             selectorText.indexOf(':active') === -1 &&
                             selectorText.indexOf(':link') === -1 &&
                             selectorText.indexOf('::') === -1 &&
-                            selectorText.indexOf('"') === -1 &&
                             selectorText.indexOf("'") === -1) {
                         var st = selectorText.split(/\s*,\s*/);
                         for (k = 0 ; k < st.length ; k++) {