Search code examples
htmlcssemailhtml-email

Fix the email newsletter layout

I am creating an email newsletter layout and I got a bit confused with coding one element.

Here is the desired result: Screenshot

Here is what I've got: Screenshot

What am I doing wrong?

Please see my code below:

<tr>
    <td style="background-color:#ffffff;">

        <table style="max-width: 535px; margin-top: 50px; text-align:center; margin-left:auto; margin-right:auto;">
            <colgroup>
                <col span="1" style="width: 60%;">
                <col span="1" style="width: 40%;">
            </colgroup>

            <tr>
                <td style="padding:0; background-color:#e9e9e9; text-align: left; font-family: Lora; width:235px;">
                    <div style="padding: 10px 30px;">
                        <h2 style="color:#BF1435; text-transform:uppercase;">Срок завершения работ - 01.09.2023</h2>
                        <p><strong>Всего 25 апартаментов.</strong></p>
                    <p><strong>Редкие планировки - от 25 м².</strong></p>
                        <p><strong>Высота потолка - 3 м.</strong></p>
                        <p><strong>Апартаменты с отделкой:</strong> стены выкрашены в светлые тона, плитка в с/у, на полу паркет, выполнена разводка электрики и сделаны основные выводы.</p>
                    </div>
                </td>

                <td>
                    <img src="images/image-card-1.png" style="width:200px">
                </td>
            </tr>
        </table>
    </td>
</tr>
Solution

  • The correct solution was:

                                     <tr>
                                    <td style="background-color:#e9e9e9; padding:0; line-height: 0;">
                                        <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
                                            <tr>
                                                <td width="285" style="line-height: 22px; padding: 20px 20px">
                                                    <h3 style="font-size: 23px; padding-bottom: 20px;">Срок завершения работ - 01.09.2023</h3>
                                                    <p style="margin-top:8px; margin-bottom:8px;"><strong>Всего 25 апартаментов.</strong></p>
                                                    <p style="margin-top:8px; margin-bottom:8px;"><strong>Редкие планировки - от 25 м².</strong></p>
                                                    <p style="margin-top:8px; margin-bottom:8px;"><strong>Высота потолка - 3 м.</strong></p>
                                                    <p style="margin-top:8px; margin-bottom:8px;"><strong>Апартаменты с отделкой:</strong> стены выкрашены в светлые тона, плитка в с/у, на полу паркет, выполнена разводка электрики и сделаны основные выводы.</p>
                                                </td>
                                                <td width="240"><img src="https://drive.google.com/uc?export=view&id=1T9GalUHGUZdRtJcNQlf_p39wTbF5UybR" alt="Image Column" width="240"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>