'HTML appearance in the email is different than in browser

I've the below html code, that I want to use it as template for sending emails in my app:

        .card-label {
            background-color: rgb(229, 232, 237);
            border-radius: 16px 16px 0px 0px;
            color: rgb(50, 50, 50);
            display: block;
            font-size: 14px;
            margin: 1em 0px 0px;
            padding: 0.5em 1em;
            position: relative;
            text-align: center;
            z-index: 2;
            font-family: Inter,sans-serif;
            -webkit-font-smoothing: antialiased;
            line-height: 1.4;
            text-rendering: optimizeLegibility;
        }
        .card {
            display: block;
            border-radius: 0px 0px 16px 16px;
            background: rgb(8, 27, 75);
            color: rgb(255, 255, 255);
            overflow: auto;
            padding: 1em;
            white-space: normal;
            overflow-wrap: normal;
            font-family: "JetBrains Mono", sans-serif;
            font-size: 14px;
            line-height: 1.4em;
            box-sizing: border-box;
            text-rendering: optimizeLegibility;
        }
    <div class="card-label">
        {{.Name}}
    </div>
    <div class="card">
        {{.Message}}
    </div>

    <a href="https://wa.me/{{.Number}}">الرد برسالة واتس!</a>

The full file is:

<!-- template.html -->
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="utf-8">
    <style>
        .card-label {
            background-color: rgb(229, 232, 237);
            border-radius: 16px 16px 0px 0px;
            color: rgb(50, 50, 50);
            display: block;
            font-size: 14px;
            margin: 1em 0px 0px;
            padding: 0.5em 1em;
            position: relative;
            text-align: center;
            z-index: 2;
            font-family: Inter,sans-serif;
            -webkit-font-smoothing: antialiased;
            line-height: 1.4;
            text-rendering: optimizeLegibility;
        }
        .card {
            display: block;
            border-radius: 0px 0px 16px 16px;
            background: rgb(8, 27, 75);
            color: rgb(255, 255, 255);
            overflow: auto;
            padding: 1em;
            white-space: normal;
            overflow-wrap: normal;
            font-family: "JetBrains Mono", sans-serif;
            font-size: 14px;
            line-height: 1.4em;
            box-sizing: border-box;
            text-rendering: optimizeLegibility;
        }
    </style>
</head>
<body>
    <div class="card-label">
        {{.Name}}
    </div>
    <div class="card">
        {{.Message}}
    </div>

    <a href="https://wa.me/{{.Number}}">الرد برسالة واتس!</a>

</body>
</html>

The file looks nice in the browser, but the styling looks to be broken in the email, as shown below:

enter image description here

What could be the issue, and how can I fix it?

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions