0

Currently, I'm working on an e-mail template in HubSpot but I came across a problem that I can't seem to find a fix for.

<table class="two-col-centered" style="line-height: 1.5em; max-height: 309px;">
<tr>
    <td style="width: 40%; font-size: 12px; padding: 0px 0px 0px 0px;" valign=top class="k-700-col mk-padding">
        <table style="width: 100%;"><tr>
            <td style="padding: 0px 0px 0px 00px;">
                {% if widget.Image.src %}
                    <img src="{{ widget.Image.src }}" width="309px;" height="269px" alt="{{ widget.Image.alt }}">
                {% endif %}
            </td>
        </tr></table>
    </td>

    <td style="width: 60%; font-size: 12px; padding: 0; background-color: #ED4A2F;" valign=top class="k-700-col mk-padding;">
        <table style="width: 100%;"><tr>
            <td style="padding: 25px 30px;">
                <h2 style="font-size: 20px; margin: 0; margin-bottom: 10px; color: #fff;">{{ widget.heading_right }}</h2>
                <span style="display: block; background-color: #fff; width: 5em; height: 5px;  border: none;"></span>
                {{ widget.content_right }}
                {{ widget.CTA }}
            </td>
        </tr>
        </table>
    </td>

</tr>

This is the code currently in HubSpot for the particular part that isn't responsive in the Gmail app.

Android Gmail app screenshot

iOS app screenshot

Outlook 2016 screenshot

Outlook Chrome screenshot

Ideally, I would like to have the Android Gmail app like the iOS app... Thanks in advance.

Sonny Luu
  • 1
  • 1

1 Answers1

0

Android Gmail app does not support media queries.

Outlook does not support a value like this in tables: width="309px;" Use width="309" instead.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28