Fix mobile email rendering, drop all paddings on vertical screens

voiio · Mar 29, 2023 · b7e650b · b7e650b
1 parent ad3722c
commit b7e650b
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 {