Coding html email with Google Inbox (auto-resizing)

Question

Trying to create an Email newsletter that displays correctly in mobile apps, but Google Inbox's auto-resizing feature breaks the layout.

I tried using min-width inline each element (a trick that works with the gmail app), but sadly it had no effect in Inbox. Also, unlike in the Gmail App, there is no option to disable auto-resizing in the message.

Any suggestions?

Answer 1

I ran into the same thing. It turns out if you use the !important declaration, it works. For example:

<div style="width: 100% !important; min-width: 100% !important;"></div>

This worked for me on the Gmail app and the Inbox app.

Answer 2

Have noticed the same thing. What has been working for me on some email templates is to remove min-width and add an inline style of margin:0 auto; to each table, this will at least align content down the center. Please see an example below:

                    <table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="left">
                      <tr>
                        <td style="width:300px;">

                        </td>
                      </tr>
                    </table>

                    <table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="right">
                      <tr>
                        <td style="width:300px;">

                        </td>
                      </tr>
                    </table>