Шаблон электронной почты Django Различные стилизации в gmail и в mailhog

У меня есть html шаблон электронной почты на Django и я пытаюсь выровнять нижний колонтитул в 1 колонку, он выравнивается правильно в mailhog и когда я открываю html шаблон в браузере, но когда он отправляется с помощью gmail smtp, выравнивание выглядит иначе. Пожалуйста, помогите мне с правильным выравниванием, которое работает в Gmail. Ниже прикреплены изображения

Неправильное выравнивание в gmail:

Правильное выравнивание:

.footer {
        background-image: url("https://folaglobal-production-bucket.s3.ap-southeast-1.amazonaws.com/logo/letter-head.png");
        background-size: cover;
        padding: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: bold;
        line-height: 24px;
        border-left: 1px solid #d4dadf;
        border-bottom: 1px solid #d4dadf;
        border-right: 1px solid #d4dadf;
    }

<tr>
<td align="center" bgcolor="#ffffff" class="footer">
    <p style="margin: 0; color:#2B4C4C">6th Floor, 259 CLMC Building, EDSA, Mandaluyong City<br>

        <a href="mailto:admin@folaglobal.com" style="color:#0563c1">admin@folaglobal.com</a><br>
    </p>
    <div
        style="display:flex; flex-direction: row; justify-content: center; margin-top: 5px; margin-bottom: 5px;">
        <a href="https://www.instagram.com/folaglobalinc/" target="_blank"
            style="margin-right: 15px; height: 20px; width: 20px;">
            <img src="https://folaglobal-production-bucket.s3.ap-southeast-1.amazonaws.com/logo/instagram-square-brands.png"
                alt="instagram" title="instagram" width="20px" height="20px" style="display:block" />
        </a>
        <a href="https://www.facebook.com/FolaGlobalInc/" target="_blank"
            style="margin-right: 15px; height: 20px; width: 20px;">
            <img src="https://folaglobal-production-bucket.s3.ap-southeast-1.amazonaws.com/logo/facebook-square-brands.png"
                alt="facebook" title="facebook" width="20px" height="20px" style="display:block" />
        </a>
        <a href="https://www.tiktok.com/@folaglobal?lang=en" target="_blank"
            style="height: 20px; width: 20px;">
            <img src="https://folaglobal-production-bucket.s3.ap-southeast-1.amazonaws.com/logo/tiktok-brands.png"
                alt="tiktok" title="tiktok" width="20px" height="20px" style="display:block" />
        </a>
    </div>
    <p style="margin: 0; color:#2B4C4C; font-size: 8pt;">This is a system generated message.
        Please do not reply
        to this email</p>

    <!-- <img src="https://folaglobal-production-bucket.s3.ap-southeast-1.amazonaws.com/logo/letter-head.png"
        style="width: 100%; margin-top: 10px;" alt="tiktok" /> -->
</td>
</tr>

Вернуться на верх