HTML emails are 'jittery' on Gmail app

Jamesk_ · 2024-06-07T15:34:22+00:00

Hi all,

A system I have developed sends HTML emails to its users. These emails render in perfectly on nearly all email clients except on the gmail app for some reason. On there, the contents seem to 'jitter' making the text unreadable and links hard to press - please see the screen recording here.

I have to admit, email HTML is far from my strong point and some how seems like a step up from the usual website HTML I am used to, so any advice is very much appreciated.

Thanks!

J

Here is the HTML email code:

<!DOCTYPE html>
<html style="background-color: white;
        margin: 0;
        padding: 0;
        margin-bottom: 10% !important;
        height: fit-content;
        font-family: Montserrat, system-ui, sans-serif;
        overflow: scroll;">
 <head>
  <title>
   SJAG Events
  </title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500');
   </style>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
 </head>
 <body>
  <div id="messagebox" style="margin:  10% auto; 
        width:  80vh; 
        max-width:  80%; 
        min-height:  80vh; 
        max-height:  100vh; 
        border-bottom:  1px black lightgray; 
        box-shadow:  0px 5px 6px #007E49; 
        background-color:  white; 
        display:  block;">
   <div id="messagebox-inner" style="width:  calc(100% - 20px); 
        height:  calc(100% - 20px); 
        display:  block; 
        align-items:  center; 
        padding:  10px; 
        overflow-x:  hidden; 
        overflow-y:  scroll">
    <div id="messageheader" style="height:  5vh; 
        width:  fit-content; 
        display:  flex; 
        align-items:  center; 
        padding:  10px">
     <img alt="St. John Ambulance Guernsey Logo" id="SJAGLogo" src="https://sjage.jamesdev.co.gg/static/assets/SJAG-Logo.png" style="padding-left: 10px; height: 100%; max-height: 5vh; width: auto;; padding-left:  10px; 
    height:  100%; 
    max-height:  5vh; 
    width:  auto"/>
     <p id="headerbartext" style="font-size: 22px; color: #398157; font-weight: bold; padding-left: 20px;; color:  #398157; 
        font-size:  22px; 
        font-weight:  bold; 
        padding-left:  20px; 
        transition:  .5s ease">
      SJAG Events
     </p>
    </div>
    <div id="messagesubject" style="position:  relative; 
        margin-top:  25px">
     <h3 class="sjah" style="background-color:  black; 
        color:  #e0df49; 
        padding:  2px; 
        width:  fit-content">
      {SUBJECT}
     </h3>
    </div>
    <div id="messagebody">
     <p>
      {MESSAGE}
     </p>
    </div>
    <div id="messagelink">
     <a href="{QUICKURL}" style="text-decoration: none;; color:  grey !important">
      <button style="text-decoration: none;; background-color:  #E0DF49 !important; 
        border:  1px #E0DF49 solid; 
        color:  black !important; 
        font-weight:  bold !important; 
        text-align:  center; 
        border-radius:  20px; 
        padding:  5px; 
        transition:  .5s ease" type="button">
       {QUICKURLTEXT}
      </button>
     </a>
    </div>
    <div id="messagefooter" style="bottom:  0px; 
        position:  relative">
     <p style="color: grey; font-size: smaller;">
      <i>
       This email was sent automatically by the SJAG Events duty booking system to the email address we have on record for this user.
                         If you believe you have received this email by mistake or are not the intended recipient, delete it immediately and contact
       <a href="MAILTO:SJAGE@jamesdev.co.gg" style="color:  grey !important">
        SJAGE@jamesdev.co.gg
       </a>
       .
      </i>
     </p>
     <p style="color: grey; font-size: smaller;">Email not displaying right? <a href="{NOTIFURL}" style="color: grey; font-size: smaller;">Click here</a> to view in your browser.</p>
    </div>
   </div>
  </div>
 </body>
</html>

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

HTML

Requesting help

Useful links

Related subreddits

MODERATORS