Search code examples
htmlfirebasefirebase-authenticationhtml-email

Firebase email formatting/styling not working

I'm trying to personalize the reset password email template from firebase.

It should look something like this:

enter image description here

but instead it looks like this: enter image description here

I've tried with the tag but that didn't work so i individually put the style in ach element, it kinda worked for like one email, but now is completely broken, seems like it isn't reading the flow-direction: column, but seeing it in the browser the styling looks fine, someone knows what is happening?

here is the code i'm puting in the message

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recover Password Email</title>
</head>
<body style="font-family: 'Poppins', sans-serif;box-sizing: border-box;margin: 0;padding: 0;background: #fff; display: flex; flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet">
    <img src="https://tutorstripe.netlify.app/image.svg" alt="Fingerprint Icon" style="width: 100%;max-width: 70px;margin: 0 auto;"/>
    <h1 style="font-size: 2rem;font-weight: 700;margin: 0;padding: 0;color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;">¡Hola, Lucas!</h1>
    <p class="message" style="font-size: 0.75rem;font-weight: 400;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
        Recibes este correo porque nos notificaron que olvidaste tu contraseña, desafortunadamente nosotros tampoco sabemos cuál es tú contraseña 😵, toda la información sensible que recibimos de ti esta encriptada 🔒 para mantenerte seguro.
        <br><br>
        Pero no hay de qué preocuparse 😅, para recuperar el acceso a tú cuenta puedes cambiar la contraseña y podrás seguir usando nuestra aplicación de inmediato
    </p>
    <p class="warning" style="font-size: 0.6rem;font-weight: 500;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
        🚩 Si tú no solicitaste restablecer tu contraseña puedes ignorar este correo 🚩
    </p>
    <button onclick="window.open('%LINK%')" style="padding: 0.5rem 2rem;border-radius: 0.25rem;background-color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;cursor: pointer;outline: none;border: none;color: #fff;font-size: 0.9rem;font-family: 'Poppins';font-weight: 600;">
        Cambiar contraseña
    </button>
    <h3 style="font-size: 0.7rem;font-weight: 500;margin: 0;padding: 0;color: #000;margin-top: 1rem;margin-bottom: 1rem;text-decoration: underline;">Attentamente</h3>
    <h2 style="font-size: 0.75rem;font-weight: 600;margin: 0;padding: 0;color: #486EFF;margin-top: -0.8rem;margin-bottom: 1rem;">El frutifantástico equipo de Tutor</h2>
    <br><br><br>
    <div class="footer" style="background: #486EFF;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;position: fixed;bottom: 0;">
        <p class="copyright" style="font-size: 0.6rem;font-weight: 300;margin: 0;padding: 0;color: #fff;margin-top: 1rem;margin-bottom: -1rem;">© 2022 Tutor. Todos los derechos reservados</p>
        <h4 style="font-size: 0.8rem;font-weight: 700;opacity: 0.6;">Tutor</h6>
    </div>
</body>
</html>
Solution

  • HTML Email doesn't support a lot of modern CSS such as flex, nor SVG images.

    Check https://caniemail.com for what you can use.

    You also can't use JavaScript - change the onclick event to a URL.

    You can use divs for single column layouts, but you will still need one outer table for Outlook as that doesn't support max-width and doesn't work well with divs in general.

    Outer structure example:

    <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->

..Content here..

<!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>

    Looks like you need a primer to HTML Email, or perhaps a framework if you didn't want to think too hard, and I'd recommend this page of resources: https://emailresourc.es/#code-frameworks