Fix mobile email rendering, drop all paddings on vertical screens (#20)

The style-tag was scrapping the styles block, which was misleading. Template blocks should probably wrap DOM not CSS, especially with the naming. I also used a zero-width space, or zero byte char, instead of the space, to enable paddings on Outlook. The vertical padding is gone, on vertical phones, since most email clients implement their padding. We cannot drop the padding completely thanks to Mail on iOS, but we increased it to match iOS and look more deliberate in Gmail.
voiio · Mar 29, 2023 · d146b02 · d146b02
1 parent ad3722c
commit d146b02
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/emark/templates/emark/base.html b/emark/templates/emark/base.html
@@ -5,11 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <title>{{ subject }}</title>
-    <style>
     {% block styles %}
-    {% include "emark/styles.css" %}
+      <style>{% include "emark/styles.css" %}</style>
     {% endblock styles %}
-    </style>
   </head>
   <body>
     {% block preheader %}
@@ -23,7 +21,7 @@
            cellspacing="0"
            class="body">
       <tr>
-        <td>&nbsp;</td>
+        <td class="container-padding">&#xfeff;</td>
         <td class="container">
           <div class="content">
             <!-- START CENTERED WHITE CONTAINER -->
@@ -49,7 +47,7 @@
             <!-- END CENTERED WHITE CONTAINER -->
           </div>
         </td>
-        <td>&nbsp;</td>
+        <td class="container-padding">&#xfeff;</td>
       </tr>
     </table>
   </body>

diff --git a/emark/templates/emark/styles.css b/emark/templates/emark/styles.css
@@ -269,7 +269,7 @@ hr {
 
   table.body .wrapper,
   table.body .article {
-    padding: 10px !important;
+    padding: 24px !important;
   }
 
   table.body .content {