4

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?

Dovid Levine
  • 167
  • 1
  • 4
  • 14

3 Answers3

5

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.

getsnoopy
  • 68
  • 1
  • 6
1

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>
Alex Karpov
  • 109
  • 1
  • 7
0

It looks like you're going for responsive web design.

I'd start with the main container width:100% and your viewport set in the header:

<meta name="viewport" content="user-scalable=yes,width=device-width,initial-scale=1,maximum-scale=1">

Then align the rest of your divs or containers as block or inline blocks with % widths Unless you specifically want a pixel width for a div.

Liquidchrome
  • 894
  • 5
  • 10
  • 1
    Sadly, that doesnt help. While the newsletter is responsive in web, the dimensions for each item/div/table/etc are hard-coded in, so as to display correctly in Gmail (which disregards media queries). The issue here is that Gmail and Google Inbox use a feature called "Auto Resize". While you can get around this issue in gmail by adding min-width to each table/div/img, this workaround does not work in Inbox... – Dovid Levine Apr 25 '15 at 22:26